Google Maps API V3をWebページに貼りつける

投稿日: 2011/7/21 17:53

せっかく不動産物件のWebページを自作しているので
地図はGoogle Mapのカッコいい地図を貼りつけたい・・・
という事で貼りつけてみました。

Google Mapを貼りつける場合にはGoogle Maps APIというものを利用するそうで
ちょっと前まではV2が主流でしたが今はV3が最新版になっているようです。
V2の貼りつけ方を紹介したWebサイトは結構あるのですが
V3の貼りつけ方はあまり無かったので記載しておきます。

まずはGoogle本家のチュートリアルを確認しました。

Google Map JavaScript API V3 チュートリアル

これによると次のようなタグを貼りつける事で動作するようです。
V2まではGoogleのWebサイトであらかじめAPIキーを登録しておく必要がありましたが、
V3からは不要となったようです。
(自分のWebページにタグを書くだけで動作するようになった)

[html]
<html>
<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
[/html]

まずはIDにmap_canvasを指定したdivタグを配置し、
地図の表示領域を作成します。
今回の例では画面一杯に表示しています。

続いてheadタグ内にGoogleのWebサイトからjsファイルを読み込む
scriptタグを記述します。

読み込んだだけでは動作しませんのでさらにscriptタグを追加し
initialize関数で初期化処理を定義します。
initialize関数はbodyタグのonloadイベントに仕掛けておきます。

initialize関数の内部で地図の挙動を設定します。
new google.maps.LatLng の引数で地図の中央に設定する緯度と経度を指定し
myOptions変数の中にズームレベルや地図の種別を指定しています。

基本的には以上でGoogleMapが自分のWebサイト上に表示されるはずです。

2件のコメント

  1. おおぅ!!!
    さすが、仕事が早いですね。
    かっこいいMAP完成じゃないですか。

    成約に向けて頑張ってください。

  2. 追加機能確認&応援ありがとうございます。
    ホームページからの成約への道のりはまだまだ長く遠いですが精進していきたいとおもいます。

コメントは閉じられています.