Google Maps API V3 基礎の基礎

基礎の基礎。ただマップに地図を表示するだけ。
たったそれだけでも、会社概要に掲載する地図が作れるもんね。カンタン、カンタン。

まずはHTML要素として、地図を表示するためのDIVを配置。あとでJavaScriptからコントロールするので、適当にIDを振っておきましょう。

<input type="text" name="address" id="address" value="東京都港区芝公園4-2-8">
<button type="button" id="submit-geocoding">緯度経度を取得</button>
<textarea id="result-geocoding">ここにレスポンス（JSON）が表示されます</textarea>
<script type="text/javascript">
  function initMap() {
    var geocoder = new google.maps.Geocoder;
    document.getElementById("submit-geocoding").addEventListener("click", function() {
      geocodeAddress(geocoder);
    });
  }
<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>

ここでワンポイント！　地図を表示するためのボックス（この場合は div#map-canvas）に height が未設定だと、0pxのボックスになっちゃいます。忘れずに設定しましょう。今回は style 属性で指定していますが、CSSに記述するほうがスマートです。

それからあとは、JavaScriptで。
下のコードでGoogle Maps APIを呼び出します。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

YOUR_API_KEY という部分は、Maps JavaScript API を利用する上で必要な API キーです。
取得に関しては、公式ドキュメントのキーの取得、認証を参照してください。

で、この末尾にある callback=initMap という部分が、「API が読み込み完了したら、initMap という関数を実行してね」って意味です。

というわけで、地図を描画するための関数 initMap を作成しましょう。ざっくり以下のとおり。

  function initMap(lat, lng, mapBox, draggable) {
    var myLatlng = {lat: 35.658620, lng: 139.745417};
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 16,
      center: myLatlng,
    });
    var marker = new google.maps.Marker({
  }

これで地図が表示されます。

マーカーを１つだけ追加するには、var marker = ... で始まる4行を追加してください。

  function initMap(lat, lng, mapBox, draggable) {
    var myLatlng = {lat: 35.658620, lng: 139.745417};
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 16,
      center: myLatlng,
    });
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
  }

これまでに書いたコードをまとめると以下のとおり。

<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<script type="text/javascript">
  function initMap(lat, lng, mapBox, draggable) {
    var myLatlng = {lat: 35.658620, lng: 139.745417};
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 16,
      center: myLatlng,
    });
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

以上で完了。カンタンでしょ？