質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1325閲覧

vue googlemap api 吹き出しの中でモーダル出して動的に値を変えたい

qooo

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/12/20 03:53

前提・実現したいこと

吹き出しの中のボタンを押してモーダルをだして、その内容を吹き出しと同じように動的に値を変えたいです。

vuejsでgooglemapのJavaScript APIを使っています。
mapのライブラリなどは使っていません。

複数マーカー、吹き出し、ボタンクリックでモーダルは出ました。
吹き出しの値は動的に変わるのですが、モーダルの内容をどのようにして変えればいいのかわかりません。

該当のソースコード

該当箇所を載せておきます。

vue

1<template> 2 <div> 3 <div :id="mapName" class="googleMap" :marker="marker"></div> 4 <div id="overlay" v-show="showContent" v-on:click="closeModal"> 5 <div id="content"> 6 <button v-on:click="closeModal" id="close"><img :src="closebutton"></button> 7 <p id="detailTitle">${this.marker_items[i].name}</p> 8 </div> 9 </div> 10 </div> 11</template> 12 13<script> 14 export default{ 15 data(){ 16 return{ 17 mapName:'map', 18 element: null, 19 map: null, 20 marker: null, 21 latlng: null, 22 center: {lat:0, lng:0}, 23 position: null, 24 mapOptions: null, 25 marker_items:[ 26 {name: 'あああ', position: {lat: 34.909279, lng: 139.660684}, icon: open}, 27 {name: 'あああ', position: {lat: 36.909279, lng: 139.660684}, icon: open}, 28 {name: 'あああ', position: {lat: 34.909279, lng: 139.660684}, icon: open}, 29 ], 30 infowindow: null, 31 showContent: false, 32 closebutton: require("~/assets/img/✖.png"), 33 titleName: null, 34 } 35 }, 36 37 created: function(){ 38 if (process.client) { 39 if (!navigator.geolocation) { 40 alert('現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。') 41 return 42 } 43 44 const options = { 45 enableHighAccuracy: false, 46 timeout: 5000, 47 maximumAge: 0 48 } 49 50 navigator.geolocation.getCurrentPosition(this.success, this.error, options) 51 this.icon1 = { 52 url: '~/assets/img/Position_balloon.png', 53 } 54 this.icon2 = { 55 url: '~/assets/img/Position_balloon_✖.png', 56 } 57 } 58 }, 59 mounted: function () { 60 const modal = document.querySelector('#overlay') 61 disableBodyScroll(modal) 62 }, 63 beforeDestroy(){ 64 clearAllBodyScrollLocks() 65 }, 66 67 methods:{ 68 success (position) { 69 this.center.lat = position.coords.latitude 70 this.center.lng = position.coords.longitude 71 72 this.element = document.getElementById(this.mapName) 73 this.mapOptions = { 74 zoom: 17, 75 center: {lat:this.center.lat, lng:this.center.lng}, 76 gestureHandling: 'greedy', 77 scaleControl: false, 78 mapTypeControl: false, 79 zoomControl: false, 80 streetViewControl: false, 81 fullscreenControl: false, 82 } 83 this.map = new google.maps.Map(this.element, this.mapOptions) 84 for (var i = 0; i < this.marker_items.length; i++){ 85 let marker = new google.maps.Marker({ 86 position: this.marker_items[i].position, 87 map: this.map, 88 icon: this.marker_items[i].icon 89 }); 90 91 this.checkWifi(i); 92 93 var contentString = `<div id="info"> 94 <p> 95 ${this.marker_items[i].name} 96 </p> 97 <button id="jumpDetails">詳細</button> 98 </div>`; 99 100 let infowindow = new google.maps.InfoWindow({ 101 content: contentString 102 }); 103 104 marker.addListener("click", function() { 105 infowindow.open(this.map, marker); 106 }); 107 infowindow.addListener('domready', () => { 108 document.getElementById('jumpDetails').addEventListener('click', () => { 109 this.openModal(); 110 }); 111 }); 112 }; 113 }, 114 115 error (error) { 116 this.element = document.getElementById(this.mapName) 117 this.map = new google.maps.Map(this.element, this.mapOptions) 118 this.mapOptions = { 119 zoom: 17, 120 center: {lat:35.690218, lng:139.700592}, 121 gestureHandling: 'greedy', 122 scaleControl: false, 123 mapTypeControl: false, 124 zoomControl: false, 125 streetViewControl: false, 126 fullscreenControl: false, 127 } 128 switch (error.code) { 129 case 1: 130 alert('位置情報の利用が許可されていません') 131 break 132 case 2: 133 alert('現在位置が取得できませんでした') 134 break 135 case 3: 136 alert('タイムアウトになりました') 137 break 138 default: 139 alert('現在位置が取得できませんでした') 140 break 141 } 142 }, 143 144 openModal: function(){ 145 this.showContent = true 146 }, 147 closeModal: function(){ 148 this.showContent = false 149 }, 150 }, 151 } 152</script> 153<style> 154 .googleMap { 155 height: 500pt; 156 width: 100%; 157 z-index: 2 !important; 158 } 159 160 #info{ 161 text-align: center; 162 163 } 164 #infoIcon{ 165 display: flex; 166 } 167 /* mordal */ 168 #overlay{ 169 /* 要素を重ねた時の順番 */ 170 z-index:110; 171 172 /* 画面全体を覆う設定 */ 173 position:fixed; 174 top:0; 175 left:0; 176 width:100%; 177 height:100%; 178 /* background-color:rgba(0,0,0,0.5); */ 179 180 /* 画面の中央に要素を表示させる設定 */ 181 display: flex; 182 align-items: center; 183 justify-content: center; 184 overflow-y: auto; 185 max-height: 100%; 186 } 187 #content{ 188 z-index:200; 189 width:90%; 190 /* padding: 1em; */ 191 background-color: rgb(231, 222, 202); 192 max-height: 90%; 193 border: rgb(80, 35, 0) solid 4pt; 194 overflow: scroll; 195 text-align: center; 196 position: relative; 197 } 198 #close{ 199 position: absolute; 200 top: -10pt; 201 right: -20pt; 202 overflow: visible; 203 } 204 #close img{ 205 z-index: 300; 206 } 207 #detailTitle{ 208 font-size: 15pt; 209 line-height: 22pt; 210 color: rgb(80, 35, 0); 211 } 212 table{ 213 width: 100%; 214 border: #B4A291 solid; 215 border-width:2px 0 2pt 0; 216 color: rgb(80, 35, 0); 217 } 218 tr,th,td{ 219 border: #B4A291 solid 1pt; 220 color: rgb(80, 35, 0); 221 } 222</style> 223

試したこと

<template>タグでfor文を使えればできるのかと思ったり、
吹き出しの内容が書いてあるところにモーダルの処理をかけばいいのかと思い書いてみると吹き出しの中にモーダルが出てきて画面の幅で出てこなくて失敗しました。

どなたか教えてください。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

data属性を使って解決

投稿2020/01/17 06:32

qooo

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問