Google Maps APIを利用することで、カスタマイズした地図をWEBサイトなどに表示させることが可能になります。

使い方については以前の記事「カスタマイズしたGoogleマップをWEBサイトに表示する方法」を参考にどうぞ。

今回は店舗紹介や営業所案内ページのように1ページに複数の地図を表示したい場合のjsコード。3件のマップ表示です。ちょっとハマったので備忘録として記載します。

gmap.jsのコード内容

function initialize() {
  var latlng1 = new google.maps.LatLng(緯度,経度);
  var latlng2 = new google.maps.LatLng(緯度,経度);
  var latlng3 = new google.maps.LatLng(緯度,経度);

  var opts1 = {
    zoom: 13,
    center: latlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var opts2 = {
    zoom: 13,
    center: latlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var opts3 = {
    zoom: 13,
    center: latlng3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map1 = new google.maps.Map(document.getElementById("map_canvas1"), opts1);
  var marker1 = new google.maps.Marker({
    position: latlng1,   //マーカーの位置
    map: map1,   //表示する地図
    title: "東京本社"   //ロールオーバー テキスト
   });
  var map2 = new google.maps.Map(document.getElementById("map_canvas2"), opts2);
  var marker2 = new google.maps.Marker({
    position: latlng2,   //マーカーの位置
    map: map2,   //表示する地図
    title: "大阪支店"   //ロールオーバー テキスト
   });
  var map3 = new google.maps.Map(document.getElementById("map_canvas3"), opts3);
  var marker3 = new google.maps.Marker({
    position: latlng3,   //マーカーの位置
    map: map3,   //表示する地図
    title: "福岡営業所"   //ロールオーバー テキスト
   });
}

複数の地図にはそれぞれマーカーを表示させないと目的地が分かりませんので、最低限の内容として対応していますが、吹き出しを追加したりすると見た目が良くなりますね。