GoogleMapを読み込む

まず基本のHTMLを書く

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
</body>
</html>

JavaScriptの指定

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
</body>
</html>

読み込む地図の画像サイズ指定（例は500px×300px）
GoogleMapで住所検索をして、検索結果画面からリンクURLを表示、

「埋め込み地図のカスタマイズとプレビュー」画面で、
地図サイズ「カスタム」を選択して数値入力。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

地図を読み込む命令をJavaScriptで追加

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
<script>
    function initialize() {
      var latlng = new google.maps.LatLng(緯度,経度);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    }
</script>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

地図をいつ読み込むか指定（例はonload：ページ読み込みと同時）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

緯度・経度の値を取得

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
<script>
    function initialize() {
      var latlng = new google.maps.LatLng(35.724943,139.719913);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    }
</script>
</head>
<body>
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

Google Mapのリンクから取得したURLの中にある、

src="http://maps.google.co.jp/maps?（中略）sll=35.724943,139.719913

この1行を探して、sll=以下の数値を緯度・経度としてLatLngの()内に入力。

JavaScriptを外部ファイルとして保存（例はmap.js）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1sensor=false"></script>
<script src="map.js"></script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

map.js

// JavaScript Document
    function initialize() {
      var latlng = new google.maps.LatLng(35.724943,139.719913);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    }

APIのバージョン表記v=3.1の追加と&でsensor指定を有効にする

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=false"></script>
<script src="map.js"></script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>

地図そのものを表すMapクラスのオブジェクトを作成

// JavaScript Document
    function initialize() {
      var latlng = new google.maps.LatLng(35.724943,139.719913);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
    }

最後の1行で、HTMLで記述した

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

の参照先が記述された。