title: Google map not showing while downloading coordinates from database in javascript
body: <p>I have a a small application where I am constantly downloading geocoordinates from database through and showing in the map and at the same time, upload geolocation coordinates as well. I have written the code and data is being uploaded and downloaded perfectly fine. But the map itself doesnt display at all. Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=en&amp;key=MY-API-KEY" async defer&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
  if ("geolocation" in navigator) 
  {
      request_location();
  
  } 
  
  // Requesting location from user
  function request_location()
  {
      // Will repeat the process in two minutes
      setTimeout(request_location, 500 * 1000);
  
      // Get location info from browser and pass it to updating function
      navigator.geolocation.getCurrentPosition(update_location);
  }
  
  // Sending location to server via POST request
  function update_location(position)
  {
      // For simplicity of example we'll 
      // send POST AJAX request with jQuery
      $.post( "functions.php?action=update_geolocation", { latitude: position.coords.latitude, longitude: position.coords.longitude });
  
  
  
  }
  
  function updatemap(lat_coordinates, long_coordinates)
  {
  
  
          var map = new google.maps.Map(document.getElementById('mapholder'), 
              {
              zoom: 4,
                  center: {lat: lat_coordinates, lng: long_coordinates},
          });
  
          var marker = new google.maps.Marker({
              position: {lat: lat_coordinates, lng: long_coordinates},
                  map: map,
                  title: 'Hello World!'
                      });
  
   }
  
  
  setInterval(function update_map(){
  
          jQuery.ajax({
              url: "http://dev.radiumenterprises.co.uk/viitgo/provider/rest.php/geolocation",
              type: "GET",
  
              contentType: 'application/json; charset=utf-8',
              success: function(resultData) {
  
                              console.log(resultData);
                              console.log(resultData.latitude);
                              console.log(resultData.longitude);
  
                              var lat_coordinates = parseFloat(resultData.latitude)
                              var long_coordinates = parseFloat(resultData.longitude)
  
                              updatemap(lat_coordinates, long_coordinates); 
  
  
              },
              error : function(jqXHR, textStatus, errorThrown) {
              },
  
          });
  
      }, 3000);
  
      &lt;/script&gt;
      &lt;div style="height:100%; width:100%;"&gt;
      &lt;div style="margin: 0;padding: 0;height: 100%;" id="mapholder"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Does anyone see where I am going wrong, the only problem I am having is that map itself is not displaying. I have tried many solution but cant figure out whats causing it. Any suggestions will be highly appreciated. Thanks in advance.</p>