Google Maps APIとGoogle Geocoding APIを組み合わせて住所から地図を表示させる

2013/04/18 2015/07/24

Google Maps APIは座標指定をしないと地図が表示されないのです。
ですからページ内にGoogleマップを表示したい場合、座標をいちいち調べないといけません。

そんなの面倒くさい！とか、
ユーザーにキーワード入力させて地図を表示させたいとか、
じゃらんなどのAPIから取得した座標が日本測地系だからGoogleマップでズレるとか、
・・・・・
という方のために、Google Maps APIとGoogle Geocoding APIを組み合わせて住所から地図を表示させる方法をご紹介します。

単純にGoogleマップをページ内に表示したい、という時は…

Googleマップページへ行きまして
検索
↓
鎖マークをクリック
↓
「ウェブサイトへの地図埋め込み用 HTML コード」をコピー＆ペースト

で、十分かと思います。
今回の方法は、ほかのAPIと連携させて、たくさん地図を表示したいときに使います。

１）PHPコードを入力

まずは、下記PHPコードを書きます。

<?php
$keyAdress = '皇居'; //ここにキーワードもしくは、住所を入れます。

$address = $keyAdress;
$req = 'http://www.geocoding.jp/api/';
$req .= '?q='.urlencode($address);
$xml = simplexml_load_file($req) or die("XMLパースエラー");
$coordinate = $xml->coordinate;
$lat = $coordinate->lat;
$lng = $coordinate->lng;
?>

２）JavaScriptコードを入力

その下に、下記JavaScriptコードを書きます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  google.maps.event.addDomListener(window, 'load', function() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $lng; ?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoWindow = new google.maps.InfoWindow;

    var onMarkerClick = function() {
      var marker = this;
      var latLng = marker.getPosition();
      infoWindow.setContent('<h3>★★★<?php echo $keyAdress; ?>★★★</h3>');

      infoWindow.open(map, marker);
    };
    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $lng; ?>)
    });

    google.maps.event.addListener(marker1, 'click', onMarkerClick);
  });
</script>

３）HTMLコードを入力

そして、マップを表示させたい位置に下記HTMLコードを書きます。

<div id="map" style="width:100%; height:600px;"></div>

そうすると、「皇居」のキーワードだけで、下記サンプルのような見慣れたマップを表示できます。
「皇居」には、もちろん通常の住所を入れても表示されます。

Google Maps APIとGoogle Geocoding APIを組み合わせサンプル

Google Maps APIとGoogle Geocoding APIは、特にAPIキーも必要ないので、このままコピペで作成できるかと思います！

処理の説明

処理の説明を簡単にします。以下のようになっています。
１）「Google Geocoding API」でキーワードから座標を出力（PHP部分）
２）「Google Maps API」で地図を表示、（JavaScript・HTML部分）
　　　その際に、座標は「Google Geocoding API」で出力したものを使用する。

- API Google Geocoding API, Google Maps API