担当者ブログ

Googleマップを手軽に貼り付けられるスクリプト

2009-11-18 (Wed) 09:43
【おすすめ無料ソフト・フリーソフト 第9回】

今週はソフトの紹介ではなく、便利なソースコードのお話です。

ホームページ上で会社の地図をのせることは、もはや定番ですよね。

エコページでは「プロフィール」のページで、住所を入力するだけで地図を貼り付けることが出来ますが、
ひとつしか登録できないので、複数紹介しなければいけない時に困った人も多いかと思います。

またプロフィール以外のページに地図を貼り付けたいとのご要望もありましたので、
なるべく簡単にページに地図が貼れる方法を考えてみました。

<script src="http://maps.google.com/maps/api/js?sensor=false" 
 type="text/javascript"></script>
 <div id="map_canvas" style="width: 500px; height: 292px;"></div>
 <script type="text/javascript">
 google.maps.event.addDomListener(window, 'load', function() {
 var arr = new Array(32.79367,130.73831); //中心の緯度経度を入力
     var mapdiv = document.getElementById('map_canvas');
     var myOptions = {
         zoom: 19,
         center: new google.maps.LatLng(arr[0], arr[1]),
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         scaleControl: true
     };
     var map = new google.maps.Map(mapdiv, myOptions);
 var marker = new google.maps.Marker({
     position: new google.maps.LatLng(arr[0], arr[1]),
     map: map
 });
 });
 </script>

まずは、地図をはりたい場所に上記のソースをコピーしてください。
(エコページの場合は、ソースモードにしてから貼り付けて下さい。)

次にGoogleMapで、表示させたいエリアまで移動してください。
それから、地図の中心に表示させたい地点で右クリックをしてください。

地図

こんな感じにメニューが出てきますよね。(例では「村瀬海運ビル」上で右クリックしています)

「この場所について」を選択して左クリックします。

すると

地図緯度経度

上のテキストエリアになにやら数字が表示されます。
(実はこれが右クリックしたところの緯度経度になります)

この数字を、ソースコードの5行目にある

var arr = new Array(32.800551,130.712625); //中心の緯度経度を入力

の部分のArrayの括弧内に書き換えてください。
(例:緯度経度が「10,200」の場合はArray(10,200)という風に)


これだけでOKです。


 

こんな感じでどうでしょうか?
ちなみに、地図を大きさを変更するときは、 ソースの2行目の「width」「height」の数値を変更してください。

Comments

お役に立てたみたいでよかったです。コメントありがとうございました〜
by やました | 2010-02-17 (Wed) 17:43
おかげさまで、ホームページにグーグルマップ貼れました。 ありがとうございます!
by m | 2010-02-16 (Tue) 17:00

Contents Menu

新着実績

関連サイト

エコページTOP

テンジンWEBページ

Blog Category

Recent Trackback

ページ最上部へ