Google map JavaScript API で地図を表示


上記の HTML タグ↓  地図表示
<html>
<head>
  <style type="text/css">
    #map1 { width: 280px; height:250px; }
  </style>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【API キー】&sensor=false"></script>
  <script type="text/javascript">
    <!--
    function initialize() {
      var myLatlng = new google.maps.LatLng(35.680929,139.767020);
      var mkLatlng = new google.maps.LatLng(35.666483,139.758153);
      var myOptions = {
        zoom:12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map2 = new google.maps.Map(document.getElementById("map1"), myOptions);
      var marker = new google.maps.Marker({
        position: mkLatlng,
        map: map2
      });
    }
    // -->
  </script>
</head>
<body onload="initialize()">
  <div id="map1"></div>
</body>
</html>
          
HTML タグの説明 参考
  1. DOM内のdiv 表示する #map1 のサイズを指定
    <style type="text/css"> #map1 { width: 300px; height:250px; } </style>
     
  2. Maps API JavaScript を読み込む
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【API キー】&sensor=false"></script>
     
  3. 地図のプロパティを持つ JavaScript オブジェクトリテラルを作成
    <script type="text/javascript"><!--  function initialize() { ~ } // --> </script>
     
    • 地図を表示する中心(北緯度,東経度)を指定
      var myLatlng = new google.maps.LatLng(35.680929,139.767020);
    • 地図にマークを表示する位置(北緯度,東経度)を指定
      var mkLatlng = new google.maps.LatLng(35.680929,139.767020);
    • 「map」のオプションパラメータを指定
      var myOptions = {
         zoom:12,       // ズームレベルを指定
         center: myLatlng,    // 地図の中心位置を指定
         mapTypeId: google.maps.MapTypeId.ROADMAP // 地図の種類を指定
      }
       
  4. 「map」オブジェクトを作成する JavaScript 関数を記述
    var map2 = new google.maps.Map(document.getElementById("map1"), myOptions);
     
  5. マーカーを記述
    var marker = new google.maps.Marker({
       position: mkLatlng,     // マーカー位置を指定
       map: map2        // マーカー表示する対象を指定
    });
     
  6. map オブジェクトを body タブの onload イベントから初期化
    <body onload="initialize()">
       <div id="map1"></div>     // div 要素「map1」に、地図を表示
    </body>
map topへ  page topへ