谷歌地图在拖动标记后获取新地址信息

时间:2016-01-28 22:20:55

标签: javascript jquery google-maps google-maps-api-3

我已创建了一个自动完成表单,因此用户无需输入所有地址字段。在底部,我包含了他从autoComplete中选择的位置的地图和街道视图,但是在用户拖动标记后我想更新所有字段以显示更新的标记位置但我只能获得更新纬度/经度不是新的地名城市邮政编码等,请查看我的代码(我需要帮助的代码位于底部)并感谢您的帮助。

//autocomplete address functionality
    function initMap() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            //auto fill the address fields
            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
            document.getElementById('city').value = (place.address_components[3].long_name);
            document.getElementById('state').value = (place.address_components[5].long_name);
            document.getElementById('zip').value = (place.address_components[7].short_name);
            loadMaps();
        });
    }
google.maps.event.addDomListener(window, 'load', initMap);


function loadMaps() {
        //add map to page
        var map = new google.maps.Map(document.getElementById('googleMap'), {
            zoom: 17,
            center: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        });
        //add marker to map
        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
            //title: 'Hello World!'
        });
        //add street view map
        var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
            position: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
            scrollwheel: false,
            pov: {
                heading: 34,
                pitch: 10
            }
        });
        //functionality to unfreeze the map
        $('#panelMaps').on('click', function () {
            map.setOptions({ scrollwheel: true });
            panorama.setOptions({ scrollwheel: true });
        });
        //update address field based on drag-able marker
        google.maps.event.addListener(marker, "dragend", function () {
            document.getElementById("cityLat").value = marker.getPosition().lat();
            document.getElementById("cityLng").value = marker.getPosition().lng();
            loadMaps();
            document.getElementById("city2").value = 'add place name here'
            document.getElementById("city").value = 'city here'
            document.getElementById("state").value = 'state here'
            document.getElementById("zip").value = 'zip code here'
        });
    }

0 个答案:

没有答案
相关问题