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キーが必須に

以前はAPIキーを取得しなくても、地図を表示させることはできましたが、現在はAPIキーを取得・設定しなければ地図を埋め込むことはできなくなっています。
APIを使用しなくても正しく地図が表示されていたときに公開されているWebサイトでは、現在もAPIキーを設定していなくても地図は表示されます。ただ、今後いつ仕様が変更になるかもしれませんので、今のうちにAPIキーは設定しておいた方が良いかもしれませんね。

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

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

全てのブラウザでというわけではありませんが、ChromeやiPhoneのSafariなどでは、httpでのアクセスでは、現在地の情報を取得することができません。
セキュリティの強化により、自分が今いる場所の情報も個人情報として捉えられるようになったようです。

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

以前はスマートフォンで画面幅いっぱいに表示させた地図だとページをスクロールしたときに誤って地図を移動させてしまうというがありましたが、現在は指2本で操作したときにしか地図は動かないようになっています。
※今までのように指1本で操作させる方法もあります。

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

Shinya Yoshida

Writer
Shinya Yoshida
Category
Works
Tag
Google Maps JavaScript API