JavaScript > Google Maps > address ->geocode -> map

Google Maps Apiを使い住所からGeocodeを取得し地図を表示。

HTML

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"type="text/javascript" charset="UTF-8"></script>

<div id="bar">
    <label>住所</label>
    <input id="address" type="text">
    <input id="convert" type="button" value="地図を表示">
</div>
<div id="latlngtext"></div>
<div id="map"></div>

CSS

#map {
    margin: 20px;
    background: #F4F4F4;
    height: 380px;
}
#bar {
    margin: 20px;
}

JavaScript

// 住所からgeocodeを取得し地図を表示するGoogle Mpasのサンプル
// 下記の記事を参考にしている。
// http://www.geekpage.jp/web/google-maps-api/

// jQuery 1.8.2を利用。

var geo = new google.maps.Geocoder();

// 住所から地図を表示する。

    var req = {
        address: '新潟県  新潟市中央区  礎町通四ノ町２１１３－１３'
    };
    geo.geocode(req, getGeoCode);


// ジオコードを取得


function getGeoCode(result, status) {
    if (status != google.maps.GeocoderStatus.OK) {
        alert(status);
        return;
    }
    // https://developers.google.com/maps/documentation/javascript/reference?hl=ja#GeocoderResult
    var latlng = result[0].geometry.location
    // https://developers.google.com/maps/documentation/javascript/reference?hl=ja#LatLng
    showMap(latlng.lat(), latlng.lng());
}

// 地図表示

function showMap(lat, lng) {
    // Google Mapで利用する初期設定用の変数
    var lat = lat || 36;
    var lng = lng || 138;
    var latlng = new google.maps.LatLng(lat, lng);

    // 地図の表示
    var opts = {
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
    };
    var map = new google.maps.Map($("#map").get(0), opts);
    map.setCenter(latlng);

    // マーカーの表示
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: latlng.toString(),
        draggable: false
    });

}