Google Maps v3 adding markers via jQuery $.ajax and json
13,588
Solution 1
Like the error says, GLatLng is not defined
. GLatLng
is from version 2 of the Google Maps API but you are using version 3, so change it to google.maps.LatLng
should at least get that out of the way.
Solution 2
Here is the code that made it work
EventsView.prototype.addMapPin = function(location)
{
var myLatlng = new google.maps.LatLng(location.lat,location.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
Author by
Peter
Updated on June 28, 2022Comments
-
Peter almost 2 years
Im having problem's adding map markers to gmaps using jquery. Here is my code so far.
Right now, the error I am getting is
Uncaught ReferenceError: GLatLng is not defined
The map loads fine and the json data is being fetched and parsed properly... From what I can tell... ;)
Adding Map Pins/markers or w/e you call em...
EventsModel.prototype.fetchMapPoints = function() { $.ajax({ dataType: "json", url: '../../events/map', success: eventsV.writeMapPoints }); } EventsView.prototype.writeMapPoints = function(Locations) { if (Locations.length>0) { for (i=0; i<Locations.length; i++) { var location = Locations[i]; eventsV.addMapPin(location); } //zoomToBounds(); } } EventsView.prototype.addMapPin = function(location) { var point = new GLatLng(location.lat, location.lng); var marker = new GMarker(point); map.addOverlay(marker); bounds.extend(marker.getPoint()); $("<li />") .html(location.name) .click(function(){ showMessage(marker, location.name); }) .appendTo("#list"); GEvent.addListener(marker,"click", function(){ showMessage(this); }); }
Map Initialization
EventsModel.prototype.fetchGmapScript = function() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=eventsV.initializeMap"; document.body.appendChild(script); } EventsView.prototype.initializeMap = function() { var myLatlng = new google.maps.LatLng(coords.lat, coords.long); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("Map"), myOptions); }
Here is what the json data looks like
[{"Event":"c16a5320fa475530d9583c34fd356ef5","lat":"37.8966942","lng":"-122.0599376","Image":"321752348.png","name":"Winning apple store","Description":""},{"Event":"b6d767d2f8ed5d21a44b0e5886680cb9","lat":"37.8995050","lng":"-122.0619770","Image":"","name":"Koreana Kitchen","Description":"Peter isn't invited!"}]