Google Map APIでMapの表示とマーカーのコントロール

カテゴリーから探す

年別から見る

2015/08/04

Google Map APIでMapの表示とマーカーのコントロール

Google Map APIを使うと、簡単にWebページ上にGoogleマップを表示することができるため、

Webページの制作に関わる方はよく利用する機会があると思います。

地図の中に目的地のマーカーを設置する場合もあると思います。

今回は、マップ外に目的地のリストを表示し、

目的のリンクをクリックした時に、

マップ内のマーカーの情報を表示するという処理が必要な場合の方法についてご紹介いたします。

↓こちらがそのDEMOです

DEMO

方法

手順

HTML、CSSを準備してGoogleMapAPIを読み込み、APIの基本設定を行う
マーカーの設定とマーカーの詳細の設定を行う
マップ外の目的地リストをクリックしたときの設定を行う

1. HTML、CSSを準備してGoogleMapAPIを読み込む

HTML body内


<div id="mapWrapper">
  <div id="map-canvas"></div>
</div>

</div>

CSS


#mapWrapper {
  width: 100%;
  padding-bottom: 75%;
  position: relative;
}
#map-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#mapWrapper {

width: 100%;

padding-bottom: 75%;

position: relative;

}

#map-canvas {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

HTML head内


<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
  var mapOptions = {
      center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標
      zoom: 16 //Mapのズーム
  };
  //Mapを表示する要素のIDを指定してMapを読み込み
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize); //Google Map APIの実行
</script>

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標

zoom: 16 //Mapのズーム

};

//Mapを表示する要素のIDを指定してMapを読み込み

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

}

google.maps.event.addDomListener(window, 'load', initialize); //Google Map APIの実行

</script>

HTMLでマップを表示する要素を配置し、CSSで表示を調整します。

その後、HTMLのhead内にGoogle Map APIの読み込みと、

表示のための記述を行います。

地図だけを表示するだけなら、上記のような記述でGoogle Mapを表示できます。

2. マーカーの設定とマーカーの詳細の設定を行う

続いて、GoogleMap上にマーカーを設置するための設定を行います。

今回は、複数のマーカーを設置する場合の方法についてご紹介いたします。

先ほどのHTML head内に記述したscriptを以下のように書き換えてください。


/* map関係のオブジェクトをグローバルで定義 */
var markers = [],
    marker = [],
    infoWindow = [],
    map = {};

function initialize() {
  var mapOptions = {
      center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標
      zoom: 16 //Mapのズーム
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Mapを表示する要素のIDを指定してMapを読み込み


  /* マーカーの情報を設定 */
  markers = [
    {
      position: new google.maps.LatLng(35.712213, 139.706726),
      title: 'ロケーション1',
      summary: '説明が入ります説明が入ります説明が入ります',
      figure: 'images/figure01.jpg'
    },
    {
      position: new google.maps.LatLng(35.712518, 139.708085),
      title: 'ロケーション2',
      summary: '説明が入ります説明が入ります説明が入ります',
      figure: 'images/figure02.jpg'
    },
    {
      position: new google.maps.LatLng(35.712449, 139.705825),
      title: 'ロケーション3',
      summary: '説明が入ります説明が入ります説明が入ります',
      figure: 'images/figure03.jpg'
    },
    {
      position: new google.maps.LatLng(35.713205, 139.705060),
      title: 'ロケーション4',
      summary: '説明が入ります説明が入ります説明が入ります',
      figure: 'images/figure04.jpg'
    },
    {
      position: new google.maps.LatLng(35.713478, 139.707359),
      title: 'ロケーション5',
      summary: '説明が入ります説明が入ります説明が入ります',
      figure: 'images/figure05.jpg'
    }
  ];

  /* マーカーのアイコンの設定 */
  var image = {
    url: "images/mark.png", //画像のURL
    size: new google.maps.Size(32, 32), //サイズ
    origin: new google.maps.Point(0, 0), //アイコンの基準位置
    anchor: new google.maps.Point(16, 32), //アイコンのアンカーポイント
    scaledSize: new google.maps.Size(32, 32) //アイコンのサイズ
  };


  /* マーカの実装 */
  for(var i = 0; i < markers.length; i++){
    marker[i] = new google.maps.Marker({
        position: markers[i].position,
        map: map,
        icon: image,
        title: markers[i].title,
        zIndex: markers.length - i
    });

    /* 場所の詳細の準備 */
    infoWindow[i] = new google.maps.InfoWindow({
      content: '<section style="margin-top:5px;"><figure style="float: left;"><img src="' + markers[i].figure + '" width="64px"></figure><div style="margin-left: 74px;"><h2 style="margin-bottom: 5px;font-size: 1.17em;">' + markers[i].title + '</h2><p style="font-size: 0.84em;">' + markers[i].summary + '</p></div></section>'
    });

    /* マーカーをクリックしたら場所の詳細を表示 */
    google.maps.event.addListener(marker[i], 'click', function(e) {
      for(var i = 0; i < markers.length; i++) {
        if(marker[i].position.G == e.latLng.G && marker[i].position.K == e.latLng.K) {
          //クリックしたマーカーだったら詳細を表示
          infoWindow[i].open(map, marker[i]);
        } else {
          //クリックしたマーカーでなければ詳細を閉じる
          infoWindow[i].close();
        }
      }
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize); //Google Map APIの実行

/* map関係のオブジェクトをグローバルで定義 */

var markers = [],

marker = [],

infoWindow = [],

map = {};

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標

zoom: 16 //Mapのズーム

};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Mapを表示する要素のIDを指定してMapを読み込み

/* マーカーの情報を設定 */

markers = [

{

position: new google.maps.LatLng(35.712213, 139.706726),

title: 'ロケーション1',