同一ページに複数のgoogle mapを表示させる

下記のコードをどのように書き換えれば、同一ページに複数のgoogle mapを表示させることが可能でしょうか？

回答1件

こんにちは。
googlemapは「google.maps.Map（埋め込み対象, 設定）」で呼び込みますので、新規に対象となるdivにidを振って、google.maps.Mapで呼べるかと存じます。

以下にご提示のjavascriptを改修内包したHTMLをサンプルとして記載します。

lang
1
2<!DOCTYPE html> 
3<html>
4<head> 
5  <meta charset="UTF-8">
6  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
7</head>
8<body> 
9  
10  
11  MAP1
12  <div id='map1' style='width:300px;height:300px;margin-bottom:100px;'></div>
13  
14  
15  MAP2
16  <div id='map2' style='width:300px;height:300px;margin-bottom:100px;'></div>
17  
18  
19  <script type="text/javascript">
20  function googleMap() {
21
22
23  var latlng = new google.maps.LatLng(35.689160610317174, 139.70083951950073);/* 座標 */
24
25  var myOptions = {
26  zoom: 16, /*拡大比率*/
27  center: latlng,
28  mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
29  };
30
31  var map = new google.maps.Map(document.getElementById('map1'), myOptions);
32  /* map2を追加 */
33  var map2 = new google.maps.Map(document.getElementById('map2'), myOptions);
34
35
36  /*アイコン設定*/
37  var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
38  new google.maps.Size(70,84),/*アイコンサイズ*/
39  new google.maps.Point(0,0)/*アイコン位置*/
40  );
41
42
43  var markerOptions = {
44  position: latlng,
45  map: map,
46  icon: icon,
47  title: 'shop',/*タイトル*/
48  animation: google.maps.Animation.DROP/*アニメーション*/
49  };
50  var marker = new google.maps.Marker(markerOptions);
51  /*取得スタイルの貼り付け*/
52  var styleOptions = [
53  {
54  "stylers": [
55  { "hue": '#003366' }
56  ]
57  }
58  ];
59  var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
60  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
61  map.mapTypes.set('style', sampleType);
62  map.setMapTypeId('style');
63  };
64  google.maps.event.addDomListener(window, 'load', function() {
65  googleMap();
66  });
67  </script>  
68  
69  
70</body> 
71</html>
72

ややこしければ、少し冗長になりますが、ご提示のgoogleMap()関数をもう一つ作ってgoogleMap2()など名前変えて、
var map = new google.maps.Map(document.getElementById('map1'), myOptions);
のdocument.getElementById('map1')の「map1」を表示したい対象のdivのidに変える手も分かりやすいかもしれません。

googleMap()とgoogleMap2()をページ読み込み後に実行する感じです。

サンプルHTML

lang
1<!DOCTYPE html> 
2<html>
3<head> 
4  <meta charset="UTF-8">
5  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
6</head>
7<body> 
8  
9  
10  MAP1
11  <div id='map1' style='width:300px;height:300px;margin-bottom:100px;'></div>
12  
13  
14  MAP2
15  <div id='map2' style='width:300px;height:300px;margin-bottom:100px;'></div>
16  
17  
18  <script type="text/javascript">
19 function googleMap() {
20
21
22  var latlng = new google.maps.LatLng(35.689160610317174, 139.70083951950073);/* 座標 */
23
24  var myOptions = {
25  zoom: 16, /*拡大比率*/
26  center: latlng,
27  mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
28  };
29
30  var map = new google.maps.Map(document.getElementById('map1'), myOptions);
31
32
33  /*アイコン設定*/
34  var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
35  new google.maps.Size(70,84),/*アイコンサイズ*/
36  new google.maps.Point(0,0)/*アイコン位置*/
37  );
38
39
40  var markerOptions = {
41  position: latlng,
42  map: map,
43  icon: icon,
44  title: 'shop',/*タイトル*/
45  animation: google.maps.Animation.DROP/*アニメーション*/
46  };
47  var marker = new google.maps.Marker(markerOptions);
48  /*取得スタイルの貼り付け*/
49  var styleOptions = [
50  {
51  "stylers": [
52  { "hue": '#003366' }
53  ]
54  }
55  ];
56  var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
57  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
58  map.mapTypes.set('style', sampleType);
59  map.setMapTypeId('style');
60  };
61 
62  
63  
64  function googleMap2() {
65
66
67  var latlng = new google.maps.LatLng(35.489160610317174, 139.20083951950073);/* 座標 map1と差分を出すため少しずらしてます*/
68
69  var myOptions = {
70  zoom: 16, /*拡大比率*/
71  center: latlng,
72  mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
73  };
74
75  var map = new google.maps.Map(document.getElementById('map2'), myOptions);
76
77
78  /*アイコン設定*/
79  var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
80  new google.maps.Size(70,84),/*アイコンサイズ*/
81  new google.maps.Point(0,0)/*アイコン位置*/
82  );
83
84
85  var markerOptions = {
86  position: latlng,
87  map: map,
88  icon: icon,
89  title: 'shop',/*タイトル*/
90  animation: google.maps.Animation.DROP/*アニメーション*/
91  };
92  var marker = new google.maps.Marker(markerOptions);
93  /*取得スタイルの貼り付け*/
94  var styleOptions = [
95  {
96  "stylers": [
97  { "hue": '#003366' }
98  ]
99  }
100  ];
101  var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
102  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
103  map.mapTypes.set('style', sampleType);
104  map.setMapTypeId('style');
105  };
106  google.maps.event.addDomListener(window, 'load', function() {
107     googleMap();
108     googleMap2();
109  });
110  
111  
112  
113  </script>  
114  
115  
116</body> 
117</html>
118
119
120```お望みの結果であれば良いのですが、参考になりましたら幸いです。
121
122---------すいません少しコード修正しました
123  google.maps.event.addDomListener(window, 'load', function() {
124  });
125があるのに、別途onloadイベントを記載してしまっていたので修正しました。