teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追記しました

2016/08/29 20:19

投稿

Tats.N
Tats.N

スコア62

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,15 @@
5
5
  window.onloadで囲っても見たのですが、それでもうまくいかず質問させていただきました。
6
6
  ご教授願います。
7
7
 
8
+ 使っているInfoboxはinfoWindowをカスタムするためのもので
9
+ https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js
8
10
 
11
+ jquery.popupoverlay.jsでモーダルウインドウを出そうとしています
12
+ https://github.com/vast-engineering/jquery-popup-overlay/blob/gh-pages/jquery.popupoverlay.js
13
+
14
+ *追記
15
+ どうもvar infoWindowHTMLで記入したHTMLのIDやエレメントをbody内のscriptで呼び出そうとしたときにnullになるみたいなのですが、この場合どうすればいいですか?
16
+
9
17
  ```html
10
18
  <!DOCTYPE html>
11
19
  <html>

1

略さず入力しました

2016/08/29 20:19

投稿

Tats.N
Tats.N

スコア62

title CHANGED
File without changes
body CHANGED
@@ -26,10 +26,30 @@
26
26
 
27
27
 
28
28
  function initialize() {
29
- var secheltLoc = new google.maps.LatLng(35.666123,139.733916);
29
+ var secheltLoc = new google.maps.LatLng(00.000000,00.000000);
30
30
 
31
+ var myMapOptions = {
32
+ zoom: 15
33
+ ,center: secheltLoc
34
+ ,mapTypeId: google.maps.MapTypeId.ROADMAP
35
+ };
31
- ///////////略
36
+ var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
32
37
 
38
+
39
+ var icon = "images/icon.png"
40
+
41
+ var marker = new google.maps.Marker({
42
+ map: theMap,
43
+ position: new google.maps.LatLng(00.000000,00.000000),
44
+ visible: true,
45
+ icon: icon
46
+ });
47
+
48
+ var viewport = {
49
+ width : $(window).width(),
50
+ height : $(window).height()
51
+ };
52
+
33
53
  var infoWindowHtml =
34
54
  "<div id='content_wrapper'>"
35
55
  +"<div id='infoWin'>"
@@ -46,8 +66,65 @@
46
66
 
47
67
  +"</div> <!-- Close content_wrapper -->"
48
68
 
49
- /////////略
69
+
70
+
50
71
 
72
+
73
+
74
+ var pxOffX;
75
+ var pxOffY;
76
+
77
+ var mobileWidth = 768;
78
+ var infoWinWidth, infoWinHeight;
79
+
80
+ if(viewport.width < mobileWidth){
81
+ pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
82
+ pxOffY = -(viewport.height/2.7);
83
+ infoWinWidth = viewport.width
84
+ infoWinHeight = viewport.height/4;
85
+ // document.getElementById("infoWin").style.fontSize = "200%";
86
+ }else if(viewport.width >= mobileWidth){
87
+ pxOffX = -310;
88
+ pxOffY = -160;
89
+ infoWinWidth = 280
90
+ infoWinHeight = infoWinWidth *0.65; //It is calculating height
91
+ }
92
+
93
+ var myOptions = {
94
+ content: infoWindowHtml
95
+ ,disableAutoPan: false
96
+ ,maxWidth: 0
97
+ ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
98
+ ,zIndex: null
99
+ ,boxStyle: {
100
+ background: "url('images/white.jpg')"
101
+ ,opacity: 0.90
102
+ ,width: infoWinWidth.toString() + "px"
103
+ ,height: infoWinHeight.toString() + "px" //This is the width of the window.
104
+ }
105
+ ,infoBoxClearance: new google.maps.Size(1, 1)
106
+ ,isHidden: false
107
+ ,pane: "floatPane"
108
+ ,enableEventPropagation: false
109
+ };
110
+
111
+ // console.log(myOptions.boxStyle.width);
112
+
113
+ //Add icon click function
114
+ google.maps.event.addListener(marker, "click", function (e) {
115
+ ib.open(theMap, this);
116
+ map.setCenter(marker.getPosition());
117
+ });
118
+ console.log("marker.getPosition() = " + marker.getPosition());
119
+
120
+ var ib = new InfoBox(myOptions);
121
+
122
+ ib.open(theMap, marker);
123
+
124
+ theMap.panBy(pxOffX/2,pxOffY/2);
125
+ }
126
+ </script>
127
+
51
128
  <title>This is a title.</title>
52
129
  </head>
53
130
  <body onload="initialize()">