Laden Zeichenfolge über Jquery in Google Map

Question

Ich habe zwei Vars in einer Google Map, Marker & infoWindowContent Ich muss über jquery (Ajax/PHP/MySQL Db) aktualisieren. Ist es möglich, mit jquery/ajax generierte Variablen zu laden und die Map zu aktualisieren?

Ich kann dynamisch den Inhalt für Marker mit jQuery erzeugen, aber die Google Map lädt zuerst und dann werden die Marker erzeugt, was mir eine leere Map gibt.

Idealerweise wollte ich in der Lage sein:

auf Click-Ereignis

$.ajax({ 
    url:'script.php?do=get_accs2&area='+area, 
    type:'post', 
    dataType: 'json', 
    success: function(data){ 
     map_markers = data; 
    });//end ajax 

Refresh google map mit neuen Markern

initMap(); 

, die die unter

<script> 
     function initMap() { 
      var map; 
      var bounds = new google.maps.LatLngBounds(); 
      var mapOptions = { 
       mapTypeId: 'roadmap' 
      }; 

      // Display a map on the page 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
      map.setTilt(45); 


      // Multiple Markers 
      var markers = map_markers; 

      // Info Window Content 
      var infoWindowContent = [ 
       ['<div class="info_content">' + 
        '<h3>London Eye</h3>' + 
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +   
       '</div>'], 

       ['<div class="info_content">' + 
        '<h3>Palace of Westminster</h3>' + 
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
       '</div>'] 
      ]; 

      // Display multiple markers on a map 
      var infoWindow = new google.maps.InfoWindow(), marker, i; 

      // Loop through our array of markers & place each one on the map 
      for(i = 0; i < markers.length; i++) { 
       var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
       bounds.extend(position); 
       marker = new google.maps.Marker({ 
        position: position, 
        map: map, 
        title: markers[i][0] 
       }); 

       // Allow each marker to have an info window  
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infoWindow.setContent(infoWindowContent[i][0]); 
         infoWindow.open(map, marker); 
        } 
       })(marker, i)); 

       // Automatically center the map fitting all markers on the screen 
       map.fitBounds(bounds); 
      } 

      // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
      var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
       this.setZoom(12); 
       google.maps.event.removeListener(boundsListener); 
      }); 

     } 


    </script> 

Answer 1

reruns Eine Option wäre, die initMap in der AJAX-Callback-Funktion aufzurufen, sobald die Markerdaten verfügbar sind.

$.ajax({ 
    url:'script.php?do=get_accs2&area='+area, 
    type:'post', 
    dataType: 'json', 
    success: function(data){ 
    map_markers = data; 
    initMap(); 
});//end ajax