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

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

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

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

Q&A

1回答

10801閲覧

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

maccha69

総合スコア12

JavaScript

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

0グッド

1クリップ

投稿2015/07/05 10:03

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

<script type="text/javascript"> function googleMap() { var latlng = new google.maps.LatLng(, );/* 座標 */ var myOptions = { zoom: 16, /*拡大比率*/ center: latlng, mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map1'), myOptions); /*アイコン設定*/ var icon = new google.maps.MarkerImage('',/*画像url*/ new google.maps.Size(70,84),/*アイコンサイズ*/ new google.maps.Point(0,0)/*アイコン位置*/ ); var markerOptions = { position: latlng, map: map, icon: icon, title: 'shop',/*タイトル*/ animation: google.maps.Animation.DROP/*アニメーション*/ }; var marker = new google.maps.Marker(markerOptions); /*取得スタイルの貼り付け*/ var styleOptions = [ { "stylers": [ { "hue": '#003366' } ] } ]; var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('style', sampleType); map.setMapTypeId('style'); }; google.maps.event.addDomListener(window, 'load', function() { googleMap(); }); </script>

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

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

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

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

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

guest

回答1

0

こんにちは。
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イベントを記載してしまっていたので修正しました。

投稿2015/07/06 09:54

編集2015/07/06 10:07
noise

総合スコア256

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問