質問編集履歴
2
コード修正しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -81,7 +81,74 @@
|
|
|
81
81
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
+
コード修正しました。
|
|
84
85
|
|
|
86
|
+
```
|
|
87
|
+
var currentWindow = null;
|
|
88
|
+
function initMap(){
|
|
89
|
+
var myOptions = {
|
|
90
|
+
zoom: 6, // 任意のズーム率
|
|
91
|
+
center: new google.maps.LatLng(22.057437, 77.209021),
|
|
92
|
+
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
93
|
+
mapTypeControl: false
|
|
94
|
+
};
|
|
95
|
+
var map = new google.maps.Map(document.getElementById("map"), myOptions);
|
|
96
|
+
|
|
97
|
+
var markers = [
|
|
98
|
+
['タージマハル', 27.175052, 78.042544,'flag.png','<div id="content">'+
|
|
99
|
+
'<div id="siteNotice">'+
|
|
100
|
+
'</div>'+
|
|
101
|
+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
|
|
102
|
+
'<div id="bodyContent">'+
|
|
103
|
+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
|
|
104
|
+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
|
|
105
|
+
'(last visited June 22, 2009).</p>'+
|
|
106
|
+
'</div>'+
|
|
107
|
+
'</div>'
|
|
108
|
+
],
|
|
109
|
+
['サンプル1', 28.175052, 79.042544,'flag.png'],
|
|
110
|
+
['サンプル2', 29.175052, 79.042544,'flag.png'],
|
|
111
|
+
['サンプル3', 30.175052, 79.042544,'flag.png'],
|
|
112
|
+
['サンプル4', 31.175052, 79.042544,'flag.png']
|
|
113
|
+
];
|
|
114
|
+
|
|
115
|
+
for (var i = 0; i < markers.length; i++) {
|
|
116
|
+
var name = markers[i][0];
|
|
117
|
+
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
|
|
118
|
+
var icons = markers[i][3];
|
|
119
|
+
var contents = content[i][4];
|
|
120
|
+
createMarker(name,latlng,icons,map,contents)
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function createMarker(name,latlng,icons,map,contents){
|
|
125
|
+
var infoWindow = new google.maps.InfoWindow({
|
|
126
|
+
content : "<div id='infoWindow'>ウィンドウ内に表示する文字列<br>" +
|
|
127
|
+
"<span>文字色の変更</span><br>" +
|
|
128
|
+
"<img src='画像のパス'><div>"
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
var marker = new google.maps.Marker({
|
|
132
|
+
position: latlng,
|
|
133
|
+
icon:icons,
|
|
134
|
+
map: map,
|
|
135
|
+
// content: contents,
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
google.maps.event.addListener(marker, 'mouseover', function() {
|
|
139
|
+
if (currentWindow) {
|
|
140
|
+
currentWindow.close();
|
|
141
|
+
}
|
|
142
|
+
infoWindow.setContent(name,content);
|
|
143
|
+
infoWindow.open(map,marker);
|
|
144
|
+
currentWindow = infoWindow;
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
google.maps.event.addDomListener(window, 'load', initialize);
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
|
|
85
152
|
###試したこと
|
|
86
153
|
```
|
|
87
154
|
contentString
|
1
kei344さんご指摘ありがとうございます。あっていますでしょうか
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Google Maps API 情報ウィンドウを
|
|
1
|
+
Google Maps API 複数マーカーに情報ウィンドウをつける
|
body
CHANGED
|
@@ -8,11 +8,19 @@
|
|
|
8
8
|
|
|
9
9
|
###発生している問題・エラーメッセージ
|
|
10
10
|
|
|
11
|
+
```
|
|
12
|
+
name
|
|
13
|
+
```
|
|
11
|
-
|
|
14
|
+
はまとめて表示できたのですが、情報ウィンドウの
|
|
15
|
+
```
|
|
16
|
+
content
|
|
17
|
+
```
|
|
18
|
+
の表示方法がわかりません。
|
|
12
19
|
(情報ウィンドウの内容は個別に変えます。)
|
|
13
20
|
|
|
14
21
|
|
|
15
22
|
###該当のソースコード
|
|
23
|
+
```
|
|
16
24
|
var currentWindow = null;
|
|
17
25
|
function initMap(){
|
|
18
26
|
var myOptions = {
|
|
@@ -71,10 +79,14 @@
|
|
|
71
79
|
});
|
|
72
80
|
}
|
|
73
81
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
82
|
+
```
|
|
74
83
|
|
|
75
84
|
|
|
76
85
|
###試したこと
|
|
86
|
+
```
|
|
87
|
+
contentString
|
|
88
|
+
```
|
|
77
|
-
|
|
89
|
+
は本家サイトを参考にしています。
|
|
78
90
|
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ja
|
|
79
91
|
|
|
80
92
|
###補足情報(言語/FW/ツール等のバージョンなど)
|