Google Maps JavaScript API v3 の基本記述

上記の 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 タグの説明　参考

DOM内のdiv 表示する #map1 のサイズを指定
<style type="text/css"> #map1 { width: 300px; height:250px; } </style>
　
Maps API JavaScript を読み込む
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【API キー】&sensor=false"></script>
　
地図のプロパティを持つ JavaScript オブジェクトリテラルを作成
<script type="text/javascript"> </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 // 地図の種類を指定
  }
「map」オブジェクトを作成する JavaScript 関数を記述
var map2 = new google.maps.Map(document.getElementById("map1"), myOptions);
　
マーカーを記述
var marker = new google.maps.Marker({
position: mkLatlng, // マーカー位置を指定
map: map2 // マーカー表示する対象を指定
});
　
map オブジェクトを body タブの onload イベントから初期化
<body onload="initialize()">
<div id="map1"></div> // div 要素「map1」に、地図を表示
</body>