CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Sumit Arora
Sumit Arora

Reputation: 5241

How to Render Google Maps with Markers after Ajax Call

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. 

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&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('<li>Error');
    }
 });


// Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>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).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>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.</p>' +
        '</div>']
    ];

    // 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 & 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 < 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);
    });

}


    </script>
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      #map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}
    </style>
  </head>
  <body>


<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>




  </body>
</html>

Upvotes: 0

Views: 2380

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59318

I would suggest the following changes:

1) Since jQuery.ajax() is async by default, latlngData could be not yet populated when markers are getting initialized. Place, for example, markers initialization into success callback or .done() function (see below example)

2) Instead of dynamic loading of Google Maps API you could utilize google.maps.event.addDomListener(window, 'load', initialize);

Modified example

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;

 

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>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).</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>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.</p>' +
        '</div>']
    ];

    // 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 & place each one on the map, fetching avg_gps_latitude,   avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work)
    loadLocations().done(function (latlngData) {

        for (i = 0; i < 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);
    });
}



function loadLocations()
{
    return $.ajax({
        type: 'GET',
        url: 'https://gist.githubusercontent.com/vgrem/5be61555df259d8cbefe/raw/9ca707b3141a29f58c8281684dfc778a5e6eb035/LondonData.json',
        dataType: 'json'
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<div id="map_wrapper">
        <div id="map_canvas" class="mapping"></div>
</div>

Plunker

Upvotes: 2

deerdeer
deerdeer

Reputation: 108

marker = new google.maps.Marker({ position: position, map: map, title: latlngData[i].ssid });

When creating a Marker, the the statemant "map: map" is doing nothing in your code, because the "map" variable is undifined.

Instead, you should pass a reference to the "map" object that you have created in the "Initialize" function.

To fix it, you should make the "map" variable to be global, thus it will be reachable also outside of "Initialize" function.

Upvotes: 0

Related Questions