超級喜歡拖曳的地圖

Question

我正在努力實現地圖相同像uber.it包含皮卡位置標記，當我改變標記位置時，它顯示我的fromaddress文本框上的當前地址......但是當我在fromaddress文本框輸入一些地址我想要更改地圖上的標記位置。

請人幫我做這個

<script type="text/javascript"> 
var map; 
var marker; 
var myLatlng = new google.maps.LatLng('<?php echo $static_lat; ?>','<?php echo $static_lng; ?>'); 
var geocoder = new google.maps.Geocoder(); 
var infowindow = new google.maps.InfoWindow(); 
function initialize(){ 
var mapOptions = { 
zoom: 13, 
center: myLatlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById("map"), mapOptions); 

marker = new google.maps.Marker({ 
map: map, 
position: myLatlng, 
draggable: true 
}); 

geocoder.geocode({'latLng': myLatlng }, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
if (results[0]) { 
$('#fromlat,#fromlong').show(); 
$('#fromaddress').val(results[0].formatted_address); 
$('#fromlat').val(marker.getPosition().lat()); 
$('#fromlong').val(marker.getPosition().lng()); 
infowindow.setContent(results[0].formatted_address); 
infowindow.open(map, marker); 
} 
} 
}); 

google.maps.event.addListener(marker, 'dragend', function() { 

geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
if (results[0]) { 
$('#fromaddress').val(results[0].formatted_address); 
$('#fromlat').val(marker.getPosition().lat()); 
$('#fromlong').val(marker.getPosition().lng()); 
infowindow.setContent(results[0].formatted_address); 
infowindow.open(map, marker); 
} 
} 
}); 
}); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

只需創建視圖地圖功能，並呼籲得到lat和長時間的按鍵後..

<script type="text/javascript"> 
    var map; 
    var marker; 
    var infowindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 

    function initialize() {  
     var location = document.getElementById('PoolLocation'); 
     var autocomplete = new google.maps.places.Autocomplete(location);   

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      //document.getElementById('PoolLocation').value = place.name; 
      document.getElementById('PoolLatitude').value = place.geometry.location.lat(); 
      document.getElementById('PoolLongitude').value = place.geometry.location.lng(); 
      viewMap(place.geometry.location.lat(),place.geometry.location.lng());   
     }); 
    } 

    function viewMap(lat,lng){  
     var myLatlng = new google.maps.LatLng(lat,lng); 
     var myOptions = { 
      zoom: 14, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   

     var marker = new google.maps.Marker({ 
     draggable: true, 
     position: myLatlng, 
     map: map, 
     title: "Your location" 
     }); 

     var formatted_address = 'Select Pickup location'; 
     infowindow.setContent(formatted_address); 
     infowindow.open(map, marker); 

     google.maps.event.addListener(marker, 'dragend', function (event) { 
      geocodePosition(marker.getPosition()); 
      document.getElementById("PoolLatitude").value = this.getPosition().lat(); 
      document.getElementById("PoolLongitude").value = this.getPosition().lng();   
     }); 

     function geocodePosition(pos) { 
      var geocoder= new google.maps.Geocoder(); 
      geocoder.geocode({ 
       latLng: pos 
      }, function(responses) {    
       if (responses && responses.length > 0) { 
        document.getElementById("PoolLocation").value = responses[0].formatted_address; 
       } 
      }); 
     } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

</script>