Google maps APIで地図内に「マーカーと吹き出し」や「画像とリンク」を設置する

近頃のWebサイト（ホームページ）には、YouTubeやらGoogle Mapやらいろいろ連動して表示させていることが多いのですが、最近Google Mapを使ってあんなことやこんなことしたいというお話しがあったので何かできるかなと。

Google MapだとAPIかなぁて思って、ちょいとAPIを使って地図内でいろいろやってみました。

マーカーをつけて吹き出しをだして、画像を表示してついでにリンクを付けてと。
Google Maps APIを使うといろんなことができそうなので、使い方をご紹介したいと思います。

ここからは実装のメモです。

Google Maps APIの読み込み

Googleが提供しているGoogle Maps JavaScript APIというものをつかうのですが、APIキーが必要になります。GoogleMaps v3から2016年6月22日まではAPIキーが無くても使えていたのですが、それ以降はAPIキーがないとGoogle Mapが表示されずエラー画面になります。
Google Developers Consoleで取得可能。

「Key=」のあとに取得したAPIキーを入れます。

HTML

<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>

こんな感じで読み込みます。
headタグ内に記述しておいてください。

Google Mapとリンクとマーカーの実装

HTML

<div id="map_canvas"></div>
<ul>
  <li><a href="javascript:map_click(0)">タイトル01</a></li>
  <li><a href="javascript:map_click(1)">タイトル02</a></li>
  <li><a href="javascript:map_click(2)">タイトル03</a></li>
</ul>

IDのmap_canvasは、divの中にJavascriptで書き書きしたことを引っ張ってくるために。
あとは、リンクをClickしたら地図のマーカーが反応するようにと。

CSS

#map_canvas {
  width:600px;
  height:400px;
}

IDのmap_canvasのキャンバスに幅と高さをとって地図を表示するスペースを作ってあげる。
ここはWebサイトのデザインに合わせて調整してください。

JavaScript

var map = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
 
function inicializar() {
  // 初期設定
  var option = {
    // ズームレベル
    zoom: 12,
    // 中心座標
    center: new google.maps.LatLng(35.1683085, 136.9072405),
    // タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), option);
  google.maps.event.addListener(map, "click", function() {infowindow.close();});
 
  // ポイントの追加
  var point = new google.maps.LatLng(35.1676114, 136.904148);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><a href='URL' target='_blank'>タイトル01</a>");
 
  var point = new google.maps.LatLng(35.1675021, 136.8906085);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><a href='URL' target='_blank'>タイトル02</a>");
 
  var point = new google.maps.LatLng(35.1727874, 136.8852535);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><a href='URL' target='_blank'>タイトル03</a>");
}
 
function create_maker(latlng, label, html) {
  // マーカーを生成
  var marker = new google.maps.Marker({position: latlng, map: map, title: label});
  // マーカーをクリックした時の処理
  google.maps.event.addListener(marker, "click", function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
  });
  gmarkers[i] = marker;
    i++;
    return marker;
}
 
function map_click(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
 
google.maps.event.addDomListener(window, "load", inicializar);

 

JavaScriptはこんな感じ。
地図のズームレベルや中心座標、ポイントの追加、マーカーの生成、クリックした時の処理など。

Google Maps JavaScript APIけっこう使えそうです。

あとはGoogle Maps APIを利用する基本的な知識を頭にいれれば、他にもいろんなことができるかも。

http://www.ajaxtower.jp/googlemaps/