この例では、イギリスのロンドンを中心とした Google マップを作成しています：
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
Try it Yourself »
このページの次の部分では、上の例を段階的に説明します。
マップには、地図を入れるための HTML 要素が必要です：
<div id="map" style="width:100%;height:500px"></div>
マップは、コンテナ要素のサイズを自動的に「継承」します。
Google Maps API は、JavaScript ライブラリです。<script> タグを使用して Web ページに追加します：
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>callback パラメータは、API の準備が完了したときに呼び出す関数（=myMap）を指定します。
myMap 関数は、マップを初期化して表示します：
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
center プロパティは、マップの中心を指定します。 指定地点の地図を中央に配置するために、LatLng オブジェクトを作成します。緯度、経度の順番で座標を渡します。
zoom プロパティは、マップのズームレベルを指定します。zoom: 0 は、完全にズームアウトされた地球全体の地図を表示します。 ズームレベルが高くなるほど、より高い解像度にズームインします。
new google.maps.Map() は、新規 Google Maps オブジェクトを作成します。
下の例は、異なったマップタイプのものを 4種類定義しています：
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
Try it Yourself »
Google では、web サイトから 1 日に何千回もの Google API 呼び出しができるようになっています。
トラフィック量がかなり多い場合は、Google から無料の API キーを取得する必要があります。
無料のキーを入手するには、https://console.developers.google.com にアクセスしてください。
Google Maps では、API を読み込む際に、key パラメータに API キーが指定されているものと想定しています：
訳注：2016/12/14現在、API キーは必須です。指定しないと動作しません。
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>