Google MapsをWebサイトにただ埋め込むだけではなく、様々な処理をさせたいという要望が多くなってきました。
今回は「Google Maps JavaScript API」を利用して、Webサイトに埋め込んだ地図と連動させた処理を紹介したいと思います。

地図を利用した検索システムでは、基点となる場所から半径何メートル以内に目標物（お店など）が存在するか調べるということがあります。そういった場合、基点となる場所と目標物の直線距離がどれくらいあるかを調べることになります。

表示させた地図の中心と特定の場所との直線距離を計算

ジェイテンネットの所在地にマーカーが設置されています。
地図を動かすと地図の中心地からジェイテンネットまでの直線距離を調べてくれます。

ジェイテンネットと地図の中心の直線距離は0mです。

地図を動かしたときの処理

地図を動かしたときに何か処理をさせたい場合は、addListener() を呼び出して、イベントハンドラを登録することで、これらのイベントが受信されたときに、処理を実行することが可能となります。
サンプルではイベントハンドラ「dragend」で地図をドラッグ&ドロップで動かし終わったときに処理されるようになっています。

centerListener = google.maps.event.addListener(map, 'dragend', function() {
  // 処理内容
});

2点間の直線距離を求める

2点間の緯度・経度から2点間の直線距離（メートル）を計算します。

function calcDistance(fromLat, fromLng, toLat, toLng) {
  var from_x = fromLat * Math.PI / 180;
  var from_y = fromLng * Math.PI / 180;
  var to_x = toLat * Math.PI / 180;
  var to_y = toLng * Math.PI / 180;
  var deg = Math.sin(from_y) * Math.sin(to_y) + Math.cos(from_y) * Math.cos(to_y) * Math.cos(to_x - from_x);
  var dist = 6378140 * (Math.atan(-deg / Math.sqrt(-deg * deg + 1)) + Math.PI / 2);
  if( isNaN(dist) ) return 0;
  else return Math.round(dist);
}

下記はJavaScriptのサンプルコードとなります。
参考にしていただければと思います。

$(function() {
  // ジェイテンネットの所在地（緯度・経度）
  var lat_j = 35.731193;
  var lng_j = 139.705515;
  var j10net = {lat: lat_j, lng: lng_j};
  
  // マップを表示
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: j10net
  });
  
  // マーカーを表示
  var marker = new google.maps.Marker({
    position: j10net,
    map: map
  });
  
  // センターマーカーを表示
  var centerIcon = new google.maps.MarkerImage('/blog/img/center.gif', new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(10, 10));
  
  var centerMarker = new google.maps.Marker({
    map: map,
    icon: centerIcon
  });
    
  // 地図を動かしたときの処理（dragend）
  google.maps.event.addListener(map, 'dragend', function() {
    // センターマーカーを表示
    centerMarker.setPosition(map.getCenter());
    
    var bounds = map.getBounds();
    var center = bounds.getCenter();
    var lat = center.lat(); // 地図の中心点の緯度
    var lng = center.lng(); // 地図の中心点の経度
    // 直線距離を出力
    $('.dist').text(calcDistance(lat_j, lng_j, lat, lng));
  });
  
  // 2点間の直線距離を計算
  function calcDistance(fromLat, fromLng, toLat, toLng) {
    var from_x = fromLat * Math.PI / 180;
    var from_y = fromLng * Math.PI / 180;
    var to_x = toLat * Math.PI / 180;
    var to_y = toLng * Math.PI / 180;
    var deg = Math.sin(from_y) * Math.sin(to_y) + Math.cos(from_y) * Math.cos(to_y) * Math.cos(to_x - from_x);
    var dist = 6378140 * (Math.atan(-deg / Math.sqrt(-deg * deg + 1)) + Math.PI / 2);
    if( isNaN(dist) ) return 0;
    else return Math.round(dist);
  }
});

Google Maps JavaScript APIを利用する際の注意点

Google MapsはよくWebサイトに地図として埋め込まれていることが多いですが、仕様の変更が頻繁に発生します。 今までの正常に表示・動作していたものが急に表示されなくなったり、動かなくなったりすることは十分に考えられます。

サイトの公開後も注意が必要になってきます。
下記に、最近変更になった点をいくつか載せさせていただきましたので、参考にしていただければと思います。

最近の変更点

APIキーが必須に

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

位置情報の取得はSSL環境化でないとできない

スマートフォンでの地図の移動は「指2本で操作」

いかがでしたでしょうか？
Google Maps JavaScript APIはとても便利ですが、利用する際は、仕様変更などの情報をよく確認して正しく使いましょう。