Google map api lädt nicht auf AJAX-Anfrage

Ich schrieb ein Code-Segment, um Poly-Linie auf der Google-Karte als Animation zu zeichnen. Es funktioniert perfekt. Aber wenn ich versuche, dieses Code-Segment über eine Ajax-Anfrage aufzurufen, funktioniert es nicht. Es gibt keine Fehler. Bitte hilf mir herauszufinden, was falsch läuft.Google map api lädt nicht auf AJAX-Anfrage

Dies ist die Datei index.php.

<!DOCTYPE html> 
<html> 
<head> 
<title>Animated route</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
    } 
</style> 

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry"></script> 
</head> 
<body> 
<input type="button" id="button" value="View map" /> 
<div id="load_map_div" > 
<div id="map_loading_img" > 
<img src="../images/map_loader.gif" title="loading" /> 
</div> 
</div> 
</body> 
</html> 

<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function(){ 

jQuery("#map_loading_img").hide(); 
jQuery("#button").click(function() { 

jQuery("#map_loading_img").show(); 
jQuery.ajax({ 
url: 'ajax.php', 
type: 'POST', 
success: function (data) { 

jQuery("#map_loading_img").hide(); 
jQuery("#load_map_div").html(data); 

} 
}); 
}); 
}); 

</script>

Dies ist ajax.php Seite

<div id="map"></div> 
    <?php include "db_connect.php"; 

      $query = mysql_query("SELECT * FROM temperature_details"); 
      $firstrow = mysql_fetch_assoc($query); 

      // reset the result resource 
      mysql_data_seek($query, 0); 
      $pathCoords = array(); 

      while($row = mysql_fetch_assoc($query)){ 
       $pathCoords[] = $row; 
      } 
      $json_array = json_encode($pathCoords); 



    ?> 

    <script> 
     function initialize() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
       center: {lat: <?php echo $firstrow['latitude'].', lng:'. $firstrow['longitude']?>}, 
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      autoRefresh(map); 
     } 

     function moveMarker(map, marker, latlng,mac,date,Temperature,speed) { 
      marker.setPosition(latlng); 
      map.panTo(latlng); 

      var contentString = '<div id="content">'+ 
     '<div id="bodyContent">'+ 
     '<p><b>Mac Address. ' + mac + ' Date & Time. ' + date + '</b><br/> Temperature. ' + Temperature + ' Speed. ' + speed + 
     '</div>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 

      var marker2 = new google.maps.Marker({ 
       position: latlng, 
       //icon:"http://localhost/tempMap/img/001.png", 
       map: map, 
       title: Temperature 
      }); 

      marker2.addListener('click', function() { 
       infowindow.open(map, marker2); 
       }); 

     } 

     function autoRefresh(map) { 
      var i, route, marker; 

      /*var lineSymbol = { 
       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
       scale: 4, 
       strokeColor: '#393' 
      };*/ 
      var iconsetngs = { 
       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
      }; 

      route = new google.maps.Polyline({ 
       path: [], 
       icons: [{ 
        icon: iconsetngs, 
        repeat:'35px', 
        offset: '100%'}], 
       geodesic : true, 
       strokeColor: '#FF0000', 
       strokeOpacity: 1.0, 
       strokeWeight: 2, 
       editable: false, 
       map:map 
      }); 

      marker = new google.maps.Marker({map:map,icon:"http://localhost/tempMap/img/firetruck.png"}); 
      for (i = 0; i < pathCoords.length; i++) { 
       setTimeout(function (coords) 
       { 
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
        var mac =coords.unit_mac; 
        var Temperature = coords.temperature; 
        var date = coords.date_time; 
        var speed = coords.speed; 
        route.getPath().push(latlng); 
        moveMarker(map, marker, latlng,mac,date,Temperature,speed); 

       }, 200 * i, pathCoords[i]); 


      } 
      animateCircle(route); 
     } 
     function animateCircle(line) { 
    var count = 0; 
    window.setInterval(function() { 
     count = (count + 1) % 200; 

     var icons = line.get('icons'); 
     icons[0].offset = (count/2) + '%'; 
     line.set('icons', icons); 
    }, 20); 
} 

     google.maps.event.addDomListener(window, 'load', initialize); 
     var pathCoords = <?php echo $json_array; ?>; 
     console.log(pathCoords); 

    </script>

Quelle

2016-03-25 Hirantha

welche Fehler machen Sie haben, posten sie lol, wie sollen wir Ihren Code reparieren? – madalinivascu

console.log (PfadKorrekturen); Druckt das JSON-Array auf der Konsole. Aber die Google Map ist nicht geladen. Nur leere Seite. – Hirantha

Versuchen initialisieren() aufgerufen wird, nachdem jQuery ("# load_map_div") html (Daten) wie folgt:.

success: function (data) { 
jQuery("#map_loading_img").hide(); 
jQuery("#load_map_div").html(data); 
initialize(); 
}

Quelle

2016-03-25 08:41:22

Vielen Dank. Es klappt... – Hirantha

Google map api lädt nicht auf AJAX-Anfrage

Antwort

Verwandte Themen