Google map api fails to load on ajax request

Question

I wrote a code segment to draw poly-line on the google map as an animation. It works perfectly. But when I try to call that code segment through an ajax request, it is not working. There are no errors. Please help me to find that what is going wrong.

This is index.php file.

<!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>

This is ajax.php page

    <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>

Answer 1

Try invoking initialize() after jQuery("#load_map_div").html(data) as below:

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

Google map api fails to load on ajax request

Question

1 answers

solution1
1 ACCPTED 2016-03-25 08:41:22

Google map api fails to load on ajax request

Question

1 answers

solution1 1 ACCPTED 2016-03-25 08:41:22

solution1
1 ACCPTED 2016-03-25 08:41:22