Google Map APIの超基本的な使い方。

Google Map Web System

Google map APIは本当に便利です。かゆいところにも手が届くようになっています。

Javascriptと基本的なHTMLの知識さえあれば誰でもGoogle mapを自由に操れます。



１．Google map apiのキーを取得する。

http://code.google.com/intl/ja/apis/maps/signup.html

これはGoogle Map APIを利用する際には必須となっています。



２．HTMLファイルを作成する

下記内容のHTMLファイルを作成してください。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://www.google.com/jsapi?key=ここにGoogle map api keyを入力してください。"></script>

<script type="text/javascript">
google_init = function(){

  google.load("maps", "2", {"language" : "ja_JP"});

  map = new google.maps.Map2(document.getElementById("map")); // htmlのid="map" を指定

  map.setCenter(new google.maps.LatLng(0, 0), 14); // 緯度経度とズームレベルを入力

  map.addControl(new GSmallMapControl()); // マップを操作するためのコントローラを追加

}

google.setOnLoadCallback(google_init);
</script>

</head>

<body>

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

</body>

</html>


これだけでGoogle mapを利用することができます。かんたんですねー。