Google MapをJavascriptから利用する方法

Google MapをJavascriptから利用する方法方法です。

スポンサーリンク

Googleの「Google Map」を利用する

先ずはGooleにあるサンプルから。

必要なjsファイルを読み込んで

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

マップを表示する位置を設定します。

    var latlng = new google.maps.LatLng( -34.397, 150.644 ) ;

マップのオプションを生成して

   var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
  };

表示です。

    var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions ) ;

意外と簡単に表示できます。
以下はGooleのサイトにあるサンプルソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
           function initialize()
           {
               var latlng = new google.maps.LatLng( -34.397, 150.644 ) ;
               var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
               };
               var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions ) ;
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>

さぁ、いろいろチャレンジ!!

以上、Google MapをJavascriptから利用する方法でした。

タイトルとURLをコピーしました