Monacaで地図(Google Map)表示アプリを作成する

Monaca

<完成イメージ>

<作成手順概要>
1.Google Maps APIの利用設定を行う(前準備)
2.Google Maps APIをHTMLファイルに読み込む
3.地図の描画領域を確保する
4.表示する地図の設定を行い、描画する<作業手順詳細>
1.Google Maps APIの利用設定を行う(前準備)

(1)Google API Consoleにアクセスし、Google アカウントでログインする

(2)左側のメニューから [Services] をクリックし、Google Maps API v3 サービスをオンにする

(3)左側のメニューから [API Access] をクリックし、[Simple API Access] のAPIキーをメモする

2.Google Maps APIをHTMLファイルに読み込む

<script src="http://maps.googleapis.com/maps/api/js?key=[1-(3)で確認したAPIキー]&sensor=false"
        type="text/javascript"
        charset="UTF-8">
</script>

3.地図の描画領域を確保する

<div id="map_canvas" style="width:400px; height:500px"></div>

4.表示する地図の設定を行い、描画する

<script type="text/javascript">
  function initialize() {
    
    var mapOptions = {
      center: new google.maps.LatLng(35.658892, 139.755286),    //地図上で表示させる緯度経度
      zoom: 14,                                                 //地図の倍率
      mapTypeId: google.maps.MapTypeId.ROADMAP                  //地図の種類
    };
    
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  mapOptions);

  }
</script>

index.html 全体

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- Google Map API -->
        <script src="http://maps.googleapis.com/maps/api/js?key=[1-(3)で確認したAPIキー]&sensor=false"
                type="text/javascript"
                charset="UTF-8">
        </script>
    
        <script type="text/javascript">
          function initialize() {
            
            var mapOptions = {
              center: new google.maps.LatLng(35.658892, 139.755286),    //地図上で表示させる緯度経度
              zoom: 14,                                                 //地図の倍率
              mapTypeId: google.maps.MapTypeId.ROADMAP                  //地図の種類
            };
            
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                          mapOptions);
        
          }
        </script>   
    </head>
    
    <body onload="initialize()">

        <!-- 地図の描画領域 -->
        <div id="map_canvas" style="width:400px; height:500px"></div>

    </body>
</html>

お勧め書籍