Google Maps Javascript

Question

Ich habe eine Seite mit einer ersten Google-Karte (einer Stadt) und einer Combobox. Der Benutzer kann einen Standort auswählen, indem er eine Markierung auf die Karte zieht. Anschließend wird dieser Wert (lang, lang) in einem ausgeblendeten Feld gespeichert und an den Server übergeben. Die Combo liste jedoch einige Stadtgebiete auf. Wenn ein Benutzer einen Bereich auswählt, wird die Google Map geändert: Der Stadtplan verschwindet und die Karte des ausgewählten Bereichs wird angezeigt. Dies geschieht über getJSON, und alles funktioniert gut.

Mein Problem ist, wie diese zweite Karte, die Gebietskarte, mit der gleichen Funktionalität zu aktivieren (aktualisieren Sie die Position der ziehbaren Marker). Ich verstehe, dass die Zuhörer anfänglich an die ursprüngliche Karte gebunden sind, ich weiß einfach nicht genug Javascript, um zu verstehen, wo diese Funktionen platziert werden, um die Funktionalität auf den neuen Karten zu aktivieren, vielleicht etwas mit jquery live?

Ich fand große Hilfe in this answer, aber es löst nicht mein Problem.

Der Code ist der folgende

<script type="text/javascript" src="/site_media/js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

$(function() { 

$("#id_area").change(function() { 

    var url = '/areageo/'+this.value; 

    $.getJSON(url, function(data) { 

     if (data.lat){ 

      $('#mapCanvas').empty(); 
      // map options 
      var options = { 
        zoom: 14, 
        center: new google.maps.LatLng(data.lat, data.lon), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       // Creating the map 
      var map = new google.maps.Map(document.getElementById('mapCanvas'), options); 

       // Adding a marker to the map 
      var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(data.lat, data.lon), 
        map: map, 
        title: 'Some title', 
        draggable: true, 
         }); 
      } 

       }); //getJSON end function 

    }); //id_area change end function 

}); 


     var geocoder = new google.maps.Geocoder(); 
     function geocodePosition(pos) { 
      geocoder.geocode({ 
      latLng: pos 
      }, function(responses) { 
      if (responses && responses.length > 0) { 
       updateMarkerAddress(responses[0].formatted_address); 
      } else { 
       updateMarkerAddress('Cannot determine address at this location.'); 
      } 
      }); 
     } 
     function updateMarkerStatus(str) { 
      document.getElementById('markerStatus').innerHTML = str; 
     } 
     function updateMarkerPosition(latLng) { 
      document.getElementById('info').innerHTML = [ 
      latLng.lat(), 
      latLng.lng() 
      ].join(', '); 

      id_lat.value = [ 
      latLng.lat()]; 
      id_lon.value = [ 
      latLng.lng()]; 
     } 

     function updateMarkerAddress(str) { 
      document.getElementById('address').innerHTML = str; 
     } 

     // initial setup 
     function initialize() { 
      var latLng = new google.maps.LatLng(44.77184334415235, 20.55164378320319); // initial map position 
      var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
      zoom: 12, // initial zoom 
      center: latLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var marker = new google.maps.Marker({ 
      position: latLng, 
      title: 'Point A', 
      map: map, 
      draggable: true, 

      }); 

      // Update current position info. 
      updateMarkerPosition(latLng); 
      geocodePosition(latLng); 

      // Add dragging event listeners. 
      google.maps.event.addListener(marker, 'dragstart', function() { 
      updateMarkerAddress('Dragging...'); 
      }); 

      google.maps.event.addListener(marker, 'drag', function() { 
      updateMarkerStatus('Dragging...'); 
      updateMarkerPosition(marker.getPosition()); 
      }); 

      google.maps.event.addListener(marker, 'dragend', function() { 
      updateMarkerStatus('Drag ended'); 
      geocodePosition(marker.getPosition()); 
      }); 
     } 


     // Onload handler to fire off the app. 
     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 

Answer 1

Die einfache Antwort ist nicht der Karte befreien Sie bekommen. Wenn der Benutzer einen Vorort auswählt, zoomen Sie die existierende Karte zu diesem Bereich (und verschieben Sie den Marker wenn nötig, damit er sichtbar ist). Dann müssen Sie nichts neu definieren.

Wenn Sie eine Karte haben, versuchen Sie alles mit dieser einen Karte zu tun. Du solltest es niemals zerstören müssen, nur um etwas anderes zu zeigen.

Ihr if (data.lat) {... Block muss nur die Karte auf data.lat,data.lon zentrieren und den vorhandenen Marker an diesen Ort verschieben. Da der Marker immer noch der gleiche Marker ist und die Karte immer noch dieselbe Karte ist, müssen Sie keine Listener oder irgendetwas neu erstellen.