質問編集履歴

2

追記しました

2016/08/29 20:19

投稿

Tats.N
Tats.N

スコア62

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,22 @@
12
12
 
13
13
 
14
14
 
15
+ 使っているInfoboxはinfoWindowをカスタムするためのもので
16
+
17
+ https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js
18
+
19
+
20
+
21
+ jquery.popupoverlay.jsでモーダルウインドウを出そうとしています
22
+
23
+ https://github.com/vast-engineering/jquery-popup-overlay/blob/gh-pages/jquery.popupoverlay.js
24
+
25
+
26
+
27
+ *追記
28
+
29
+ どうもvar infoWindowHTMLで記入したHTMLのIDやエレメントをbody内のscriptで呼び出そうとしたときにnullになるみたいなのですが、この場合どうすればいいですか?
30
+
15
31
 
16
32
 
17
33
  ```html

1

略さず入力しました

2016/08/29 20:19

投稿

Tats.N
Tats.N

スコア62

test CHANGED
File without changes
test CHANGED
@@ -54,11 +54,51 @@
54
54
 
55
55
  function initialize() {
56
56
 
57
- var secheltLoc = new google.maps.LatLng(35.666123,139.733916);
57
+ var secheltLoc = new google.maps.LatLng(00.000000,00.000000);
58
+
59
+
60
+
58
-
61
+ var myMapOptions = {
62
+
59
-
63
+ zoom: 15
64
+
60
-
65
+ ,center: secheltLoc
66
+
67
+ ,mapTypeId: google.maps.MapTypeId.ROADMAP
68
+
69
+ };
70
+
71
+ var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
72
+
73
+
74
+
75
+
76
+
61
- ///////////略
77
+ var icon = "images/icon.png"
78
+
79
+
80
+
81
+ var marker = new google.maps.Marker({
82
+
83
+ map: theMap,
84
+
85
+ position: new google.maps.LatLng(00.000000,00.000000),
86
+
87
+ visible: true,
88
+
89
+ icon: icon
90
+
91
+ });
92
+
93
+
94
+
95
+ var viewport = {
96
+
97
+ width : $(window).width(),
98
+
99
+ height : $(window).height()
100
+
101
+ };
62
102
 
63
103
 
64
104
 
@@ -94,7 +134,121 @@
94
134
 
95
135
 
96
136
 
137
+
138
+
139
+
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+ var pxOffX;
148
+
149
+ var pxOffY;
150
+
151
+
152
+
153
+ var mobileWidth = 768;
154
+
155
+ var infoWinWidth, infoWinHeight;
156
+
157
+
158
+
159
+ if(viewport.width < mobileWidth){
160
+
161
+ pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
162
+
163
+ pxOffY = -(viewport.height/2.7);
164
+
165
+ infoWinWidth = viewport.width
166
+
167
+ infoWinHeight = viewport.height/4;
168
+
169
+ // document.getElementById("infoWin").style.fontSize = "200%";
170
+
171
+ }else if(viewport.width >= mobileWidth){
172
+
173
+ pxOffX = -310;
174
+
175
+ pxOffY = -160;
176
+
177
+ infoWinWidth = 280
178
+
179
+ infoWinHeight = infoWinWidth *0.65; //It is calculating height
180
+
181
+ }
182
+
183
+
184
+
185
+ var myOptions = {
186
+
187
+ content: infoWindowHtml
188
+
189
+ ,disableAutoPan: false
190
+
191
+ ,maxWidth: 0
192
+
193
+ ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
194
+
195
+ ,zIndex: null
196
+
197
+ ,boxStyle: {
198
+
97
- /////////略
199
+ background: "url('images/white.jpg')"
200
+
201
+ ,opacity: 0.90
202
+
203
+ ,width: infoWinWidth.toString() + "px"
204
+
205
+ ,height: infoWinHeight.toString() + "px" //This is the width of the window.
206
+
207
+ }
208
+
209
+ ,infoBoxClearance: new google.maps.Size(1, 1)
210
+
211
+ ,isHidden: false
212
+
213
+ ,pane: "floatPane"
214
+
215
+ ,enableEventPropagation: false
216
+
217
+ };
218
+
219
+
220
+
221
+ // console.log(myOptions.boxStyle.width);
222
+
223
+
224
+
225
+ //Add icon click function
226
+
227
+ google.maps.event.addListener(marker, "click", function (e) {
228
+
229
+ ib.open(theMap, this);
230
+
231
+ map.setCenter(marker.getPosition());
232
+
233
+ });
234
+
235
+ console.log("marker.getPosition() = " + marker.getPosition());
236
+
237
+
238
+
239
+ var ib = new InfoBox(myOptions);
240
+
241
+
242
+
243
+ ib.open(theMap, marker);
244
+
245
+
246
+
247
+ theMap.panBy(pxOffX/2,pxOffY/2);
248
+
249
+ }
250
+
251
+ </script>
98
252
 
99
253
 
100
254