title: How to Render Google Maps with Markers after Ajax Call
body: <p>The objective of below program to fetch the json (long/lat) data from a webservice, and then insert the received data into markers, and then render the Google map with markers. I have tried various strategy (e.g. kept ajax call here and there) but it didn't work, whatever be the reason that Ajax call happened after the Google Map rendered, and it doesn't do anything with Markers.(some time it doesn't render the map at all). Example given from Google Maps work as defined, but as per my objective it doesn't work. May you please suggest me what I am missing here.   </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&amp;callback=initialize";
  document.body.appendChild(script); });
  
  function initialize() {
      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);
      var latlngData = 0;    
  
              $.ajax({
    type:'GET',
    url: 'http://localhost:8080/xyz-service/xyz/xyzData/24252627',
    dataType: 'json',
    success: function(data) {
    latlngData = data; 
    console.log(latlngData);  
      },
      error: function(){
          $('#output ul').append('&lt;li&gt;Error');
      }
   });
  
  
  // Info Window Content
      var infoWindowContent = [
          ['&lt;div class="info_content"&gt;' +
          '&lt;h3&gt;London Eye&lt;/h3&gt;' +
          '&lt;p&gt;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).&lt;/p&gt;' +        '&lt;/div&gt;'],
          ['&lt;div class="info_content"&gt;' +
          '&lt;h3&gt;Palace of Westminster&lt;/h3&gt;' +
          '&lt;p&gt;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.&lt;/p&gt;' +
          '&lt;/div&gt;']
      ];
  
      // Display multiple markers on a map, same info for everyone, just an example
      var infoWindow = new google.maps.InfoWindow(), marker, i;
  
      // Loop through our array of markers &amp; place each one on the map, fetching avg_gps_latitude,   avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work)
  
      for( i = 0; i &lt; latlngData.length; i++ ) {
          var position = new google.maps.LatLng(latlngData[i].avg_gps_latitude,latlngData[i].avg_gps_longitude);
          bounds.extend(position);
          marker = new google.maps.Marker({
              position: position,
              map: map,
              title: latlngData[i].ssid
          });
  
          // Allow each marker to have an info window    
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                  infoWindow.setContent(infoWindowContent[0][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(14);
          google.maps.event.removeListener(boundsListener);
      });
  
  }
  
  
      &lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Simple markers&lt;/title&gt;
      &lt;style&gt;
        #map_wrapper {
      height: 400px;
  }
  
  #map_canvas {
      width: 100%;
      height: 100%;
  }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  
  &lt;div id="map_wrapper"&gt;
      &lt;div id="map_canvas" class="mapping"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>