Google Maps APIを利用して、1ページ内に複数のGoogleマップを埋め込む方法

Google Maps JavaScript APIでのGoogleマップ描画について。

お好みのマーカーが使えたり、地図の色合いを変化させることもできたりと、何かと使い勝手の良いサービスだ。だが、1ページ内にふたつの地図を描画するのがなにげにややこしかったので、メモがてら記事にしておく。

手順

APIキーの取得・有効化などの手順は割愛する。
bodyタグ直後にてスクリプトを読み込まなければならないが、それも割愛。
※公式ドキュメントをご覧いただくか、他の解説ページをご覧ください。

以下、Googleマップを表示したいページにて。
下記のようにGoogle Mapを呼び出す関数を記述する。適宜パラメータに付与している。

<script type="text/javascript">
 function initialize() {
  //中心の位置座標を指定する
  var latlng_01 = new google.maps.LatLng(xx.xxxxxx, xxx.xxxxxx);
  var latlng_02 = new google.maps.LatLng(yy.yyyyyy, yyy.yyyyyy);



  //地図のオプションを設定する
  var myOptions_01 = {
   zoom: 17,//拡大比率
   center: latlng_01,//中心座標
   mapTypeId: google.maps.MapTypeId.ROADMAP//表示タイプ
  };

  var myOptions_02 = {
   zoom: 17,//拡大比率
   center: latlng_02,//中心座標
   mapTypeId: google.maps.MapTypeId.ROADMAP//表示タイプ
  };



  //canvasに地図のインスタンスを作成する
  var map_01 = new google.maps.Map(document.getElementById('map_canvas_01'), myOptions_01);
  var map_02 = new google.maps.Map(document.getElementById('map_canvas_02'), myOptions_02);



  //マーカーを指定する
  var markerOptions_01 = {
   position: latlng_01,
   map: map_01,
   icon: {
    url: "../img/map_pin.png",//マーカー画像
    scaledSize: new google.maps.Size(80,60) ,
   } ,
   draggable: false,
   animation: google.maps.Animation.DROP
  };
  var marker_01 = new google.maps.Marker(markerOptions_01);

  var markerOptions_02 = {
   position: latlng_02,
   map: map_02,
   icon: {
    url: "../img/map_pin.png",//マーカー画像
    scaledSize: new google.maps.Size(80,60) ,
   } ,
   draggable: false,
   animation: google.maps.Animation.DROP
  };
  var marker_02 = new google.maps.Marker(markerOptions_02);



  //スタイルを指定する
  var styleOptions_01 = [
   {
    "stylers": [
     { "hue": "#195b7a" },//基本色
     { "saturation": -30 },//彩度
     { "lightness": 20 },//明度
     { "gamma": 1 },//ガンマ値
     { "visibility": "simplified" }
    ]
   }
  ];
  var styledMapOptions_01 = { name: '株式会社サンプル_01' }
  var sampleType_01 = new google.maps.StyledMapType(styleOptions_01, styledMapOptions_01);
  map_01.mapTypes.set('sample_01', sampleType_01);
  map_01.setMapTypeId('sample_01');

  var styleOptions_02 = [
   {
    "stylers": [
     { "hue": "#195b7a" },//基本色
     { "saturation": -30 },//彩度
     { "lightness": 20 },//明度
     { "gamma": 1 },//ガンマ値
     { "visibility": "simplified" }
    ]
   }
  ];
  var styledMapOptions_02 = { name: '株式会社サンプル_02' }
  var sampleType_02 = new google.maps.StyledMapType(styleOptions_02, styledMapOptions_02);
  map_02.mapTypes.set('sample_02', sampleType_02);
  map_02.setMapTypeId('sample_02');
 }
</script>

※4・5行目に緯度と経度を入力する。
※マーカー画像・スタイル・マップ名などは、任意のものに指定するように。

続いてマップの描画。

<div class="google-map">
 <div id="map_canvas_01" style="width:100%;height:360px;"></div>
</div>

<div class="google-map">
 <div id="map_canvas_02" style="width:100%;height:360px;"></div>
</div>