Google map is not load

Question

On the ajax success, the google map is not loaded. The database table is updated every 20 seconds and the ajax method read it every 30 seconds. The ajax method is working correctly. It shows the response on the console.The map div is loaded but the map is not loading. Please help.

Ajax call page.

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">  </script>
<script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry"></script>

<div id="map" style="height:500px;width:100%;" ></div>

<script>
var response;
var ajax_call = function() {
  $.ajax({                                      
      url: 'ajaxRequest.php',                         
      data: "",                        
      dataType: 'json',                      
      success: function(data)          
      {
        response = data;
        console.log(response);
        initialize();
      } 
    });
};

var interval = 5000; 
setInterval(ajax_call, interval);

var myCenter=new google.maps.LatLng(41.669578,-0.907495);
    var marker;
    var map;
    var mapProp;

    function initialize()
    {
        mapProp = {
          center:myCenter,
          zoom:15,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };
        setInterval('mark()',5000);
    }

    function mark()
    {   
        map=new google.maps.Map(document.getElementById("map"),mapProp);
        marker=new google.maps.Marker({
             position:new google.maps.LatLng(response)
             });
             marker.setMap(map);
             map.setCenter(new google.maps.LatLng(response));
             marker.setAnimation(google.maps.Animation.BOUNCE);
     }
    google.maps.event.addDomListener(window, 'load', initialize);
</script> 

This is the ajaxRequest.php page

<?php
 include "db_connect.php";
 $sql="SELECT * FROM temperature_details ORDER BY id DESC LIMIT 1 ";
 $result=mysql_query($sql);

 $firstrow = mysql_fetch_assoc($result);
 $outPut = $firstrow['latitude'].','. $firstrow['longitude'];
 echo json_encode($outPut);
?>

Answer 1

You're json encoding a string, not an object or array. LatLng doesn't know what to do with your string.

try:

<?php
 include "db_connect.php";
 $sql="SELECT * FROM temperature_details ORDER BY id DESC LIMIT 1 ";
 $result=mysql_query($sql);
 $firstrow = mysql_fetch_assoc($result);
 $outPut = array($firstrow['latitude'], $firstrow['longitude']);
 echo json_encode($outPut);
?>

for your php,

and

google.maps.LatLng(response[0], response[1])

instead of :

google.maps.LatLng(response)

in your javascript.