JavaScriptプログラムに関する各種メモ書き

■ Google Maps を住所から自動生成するサンプル ( Google Maps API V3 使用)

PHPやPerlなどで動的に出力されるページにGoogle Mapsを埋め込む場合、

「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」

をやっていたのでは面倒な場合があります。

そこでGoogle Maps API V3を使用して簡単に地図表示を行います。

(ただしWindowsIE6は未対応なので対応したい場合はV2を使用します。)

Google Maps を住所から自動生成するサンプル
google_map.js
var my_google_map;
var my_google_geo;

function googlemap_init( id_name, addr_name ) {
    var latlng = new google.maps.LatLng(41, 133);
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
    };
    my_google_map = new google.maps.Map(document.getElementById(id_name), opts);

    my_google_geo = new google.maps.Geocoder();
    var req = {
        address: addr_name ,
    };
    my_google_geo.geocode(req, geoResultCallback);
}


function geoResultCallback(result, status) {
    if (status != google.maps.GeocoderStatus.OK) {
        alert(status);
    return;
    }
    var latlng = result[0].geometry.location;
    my_google_map.setCenter(latlng);
    var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
    google.maps.event.addListener(marker, 'dragend', function(event){
        marker.setTitle(event.latLng.toString());
    });
}

これを読み込んで

html
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>
<script src="googlemap.js" type="text/javascript" charset="UTF-8"></script>
<script>
$(document).ready(function(){
    googlemap_init('google_map', '■表示させたい住所■');
});
</script>

<body>
<div id="google_map" style="width: 600px; height: 600px"></div>
</body>

で起動します。

■表示させたい住所■を任意の住所に書き換えればOK。

サイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。


jqueryプラグインはこちら

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

※ なおGoogle Maps APIのバージョン3からAPIコードは必要なくなりました。


関連エントリー

添付ファイル1
No.824
09/20 10:54

edit

添付ファイル

jQuery
Google