google maps javascript

Question

У меня есть страница с начальной картой google (города) и выпадающим списком. Пользователь может выбрать местоположение, перетащив маркер на карту, а затем это значение (lang, long) сохраняется в скрытом поле и передается на сервер. Однако в комбо перечислены некоторые районы города. Когда пользователь выбирает область, карта google изменяется: карта города исчезает и отображается карта выбранной области. Это делается через getJSON, и все работает отлично.

Моя проблема заключается в том, как включить это second карта, карта области, с той же функциональностью (обновите положение перетаскиваемого маркера). Я понимаю, что слушатели изначально связаны с исходной картой, я просто не знаю достаточно javascript, чтобы понять, где включить эти функции, чтобы включить функциональность на новых картах, может быть, что-то с jquery live?

Я нашел большую помощь в this answer, но это не решает мою проблему.

Код следующие

<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

Простой ответ Не избавиться от карты. Когда пользователь выбирает пригород, увеличьте карту существующей карты в эту область (и при необходимости передвиньте маркер, чтобы она была видна). Тогда вам не нужно переопределять что-либо.

Если у вас есть карта, попробуйте сделать все с помощью одной карты. Вам никогда не придется разрушать его: просто попробуйте показать что-то еще.

Для того чтобы ваш блок if (data.lat) {... нуждался только в центре карты на data.lat,data.lon и переместите существующий маркер в это место. Поскольку маркер по-прежнему остается одним и тем же маркером, а карта по-прежнему остается одной и той же картой, вам не нужно воссоздавать слушателей или что-то еще.