0

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>
Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

i tried to replicate exact the same code with my api key, i get this error "Can't find variable: google"
0

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.

Improve this answer

1 Comment

Your asnwer doesn't solve the problem, I found this link github.com/pauldessert/SeedTip, it tells the right approach to achieve the objective mentioned in the question e.g. getting data from Ajax and showing markers - everything step by step, its really informative and solve the problem. It has youtube videos as well for more comprehensive explanation.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.