「Google Maps API V3」カテゴリーアーカイブ

Google Maps API V3 逆ジオコーディング

ここではGoogle Maps API V3 緯度経度から逆ジオコーディングする方法を解説しています。

※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/

GoogleMap

デモはこちら
https://office-goto.info/demo/reverse-geocoding/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    $("input[type=button]").click(function () {
        var geocoder = new google.maps.Geocoder();
        // 入力された緯度経度取得
        latlng = new google.maps.LatLng($("#lat").val(), $("#lng").val());
        // 逆ジオコーディング
        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // マップのセンターを入力された緯度経度に設定
                map.setCenter(latlng);
                // 入力された緯度経度にMarker設定
                var marker = new google.maps.Marker({
                    map: map,
                    position: latlng
                });
                // 入力された緯度経度にInfoWindow
                google.maps.event.addListener(marker, 'click', function (e) {
                    // 緯度経度から逆ジオコーディングした住所を表示
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                });
            }
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    });
});

サンプルソースの例では緯度経度を入力して、入力された緯度経度をもとに、逆ジオコーディングして住所を取得しInfoWindowに表示しています。

Google Maps API V3 ジオコーディング

コメントを残す

ここではGoogle Maps API V3 住所からジオコーディングする方法を解説しています。

GoogleMap

デモはこちら
https://office-goto.info/demo/geocoding/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    // Markerオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    // マーカクリック時
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.setContent('Hello World');
        infowindow.open(map, marker);
    });

    $("input[type=button]").click(function () {
        var geocoder = new google.maps.Geocoder();
        var address = $("#address").val();
        geocoder.geocode( { 'address': address}, function(results, status) {
            var location = results[0].geometry.location;
            if (status == google.maps.GeocoderStatus.OK) {
                // マップのセンターを入力された住所に設定
                map.setCenter(location);
                // 入力された住所にMarker設定
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
                // 入力された住所にInfoWindow
                google.maps.event.addListener(marker, 'click', function (e) {
                    infowindow.setContent("Lat:" + String(location.lat()) + "<br>Lng:" + String(location.lng()));
                    infowindow.open(map, marker);
                });
            }
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    });
});

サンプルソースの例ではTextフィールドに住所を入力して入力された住所から緯度経度を取得し、マップを移動してMarkerとInfoWindowを設定しています。

Google Maps API V3 ドラッグ中にセンターの緯度経度取得

コメントを残す

ここではGoogle Maps API V3 マーカーをドラッグ中にセンターの緯度経度を取得する方法について解説しています。

GoogleMap

デモはこちら
https://office-goto.info/demo/drag-center/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    // Markerオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    // マーカクリック時
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.setContent('Hello World');
        infowindow.open(map, marker);
    });

    // ドラッグ中センター取得
    google.maps.event.addListener(map, 'drag', dispLatLng);
    function dispLatLng(){
        var center = map.getCenter();
        $('#lat').attr('value', center.lat());
        $('#lng').attr('value', center.lng());
    }
});

ドラッグ中にセンターの緯度経度取得する場合まず、ドラッグ中のイベントを登録します。
マップのセンターは「map.getCenter();」で取得できるので、例ではTextフィールドに表示させています。

Google Maps API V3 マーカーをドラッグ＆ドロップで動かして緯度経度取得

コメントを残す

ここではGoogle Maps API V3 マーカーをドラッグ＆ドロップで動かして緯度経度取得する方法について解説しています。

GoogleMap

デモはこちら
https://office-goto.info/demo/marker-draggable/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    // Markerオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true
    });

    // Markerのドラッグ終了イベント
    google.maps.event.addListener(marker, "dragend", function(e) {
        $('#lat').attr('value', e.latLng.lat());
        $('#lng').attr('value', e.latLng.lng());
    });
});

まず、Markerをドラッグ＆ドロップで移動させるにはMarkerのdraggable:trueで動かせるようになります。
そして、Markerのドラッグ終了イベントを定義しイベントから緯度経度を取得しています。

Google Maps API V3 InfoWindowを複数表示

コメントを残す

ここではGoogle Maps API V3 InfoWindowを複数表示する方法を解説しています。

GoogleMap

デモはこちら
https://office-goto.info/demo/infowindow-plurality2/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // Marker:LatLng / InfoWindow:text
    var arrData = new Array();
    arrData[0] = {"LatLng":new google.maps.LatLng(35.671277, 139.718489), "text": "Hellow"};
    arrData[1] = {"LatLng":new google.maps.LatLng(35.66991, 139.715291), "text": "GoodBye"};

    // setMarkerDataを配列分
    for (i = 0; i < arrData.length; i++) {
        setMarkerData(i);
    }

    // MarkerとInfoWindowを登録
    function setMarkerData(n) {
        var marker = new google.maps.Marker({
            position: arrData[n]["LatLng"],
            map: map,
            title: "ツールチップ" + (n + 1),
            icon: "icon.png"
        });
        // InfoWindowオブジェクト
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function (e) {
            infowindow.setContent(arrData[n]["text"]);
            infowindow.open(map, marker);
        });
    }
});

InfoWindowを複数表示する場合には独自関数にローカルでInfoWindowオブジェクトを定義します。
こうすることでInfoWindowを複数表示することが出来ます。