WEB系キャンパス

Google Maps APIを使用して1ページに複数地図を指定する場合の記述方法

例えば、企業のホームページで支店が複数ある場合などでGoogleMAPの埋め込みを複数設置する必要がある場合iframeの埋め込みコードなら、GoogleMapからコードをコピペしてくればOKだけど、オリジナルのピンを使ったGoogleMapの場合は、GoogleMAPのAPIを取得し、Javascriptを少々イジイジする必要がある。

複数地図を表示させたい場合のコードは以下のように記述

<script src="https://maps.googleapis.com/maps/api/js?key=◯◯◯◯◯◯◯◯◯◯"></script>;
<script>
  (function(){
//一つ目の地図
    var latlng = new google.maps.LatLng(★一つ目のGoogleMAPの緯度と経度★);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("map-01"),  //一つ目の地図のIDを指定
        myOptions
    );
    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_01,
        icon: 'img/pin.png',   //ピンの画像のディレクトリを指定
    });
//二つ目の地図
    var latlng = new google.maps.LatLng(★二つ目のGoogleMAPの緯度と経度★);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_02 = new google.maps.Map(
        document.getElementById("map-02"),  //二つ目の地図のIDを指定
        myOptions
    );
    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_02,
        icon: 'img/pin02.png',   //ピンの画像のディレクトリを指定
    });
  }());
</script>

あとは、先程指定したIDをdivなどの要素で記述
※CSSで高さや幅の指定をしないと何も出てこないので注意。

<div id="map-01"></div>
<div id="map-02"></div>

Google Maps APIのコードの取得方法は以下を参考に
(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

ちょっと長ったらしいですね…。
他にいい感じの書き方あれば教えてくださいm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です