ウェブマーケティング ブログウェブサイト制作

Googleマップを利用する方法

Googleマップを利用する方法 Googleマップを利用する方法をブックマーク
グーグルマップ

ホームページにグーグルマップを貼りつける方法の覚え書きです。クライアントさんのアクセスマップも伸縮できる地図を利用することが一般的になってきました。簡易な方法もありますが、今回はGoogleAPIを使った方法を書いています。

 

1.Google MAPS APIに登録する

ウェブサイトに地図を表示するために、Google MAPS APIに登録し、APIキーを取得します。> Google MAPS APIに登録(Googleアカウントが必要)

地図を表示するウェブサイトごとにAPIキーを取得する必要があります。登録するURLはトップページのものを入力します。

Google-api-key

2.地図ページを作成する

ウェブに呼び出すための地図ページを作成します。新規ページで以下のスクリプトを<head>~</head>の中に記述します。「登録サイトのAPI」の部分は1で取得したものに書き換えてください。

<script src="http://maps.google.com/maps?file=api&v=1&key=登録サイトのAPI"type="text/javascript"charset="utf-8"></script>
次に、表示したい地図の部分を作成します。<body>~</body>にソースコードを貼りつけてください。地図サイズを自由に変更し、表示したいポイントの経度と緯度を入力してください。経度と緯度はGeocodingで調べることができます。
<div id="map" style="position:absolute;width: 500px; height: 400px; border: 1px;"></div><!--地図のサイズ-->
<script type="text/javascript">
var point = new GLatLng(緯度,経度); <!--経度と緯度-->
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter((point), 14); <!--縮尺-->
map.addControl(new GOverviewMapControl(new GSize(120,120))); <!--右下地図-->
var marker = new GMarker(point);
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("<div id='message'>吹き出し部分</div>"); });
map.addOverlay(marker);
marker.openInfoWindowHtml("<div id='message'>吹き出し部分</div>");
</script>

地図ができているかサーバーにアップして確認してみてください。以下のサンプルのように地図が表示されていればOKです。

緯度を35.658609、経度を139.745447に置き換えています。http://www.gvsy.net/sample/google-map.html

3.表示したい場所に地図を読み出す

作成した地図を表示したい場所にiframeを使って読み出します。以下のソースコードを表示したい位置に貼りつけてください。「作成した地図のURL」の部分はさきほど地図ページを置いた場所です。

<iframe title="地図" marginwidth="1" marginheight="1" src="作成した地図のURL" frameborder="0" width="500" scrolling="no" height="400">地図</iframe>

正しく記述できている場合は、以下のように地図が表示されます。

 
 
トラックバック(0)

トラックバックURL:

コメントする