Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps v3 adding markers via jQuery $.ajax and json

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!"}]
like image 468
Peter Avatar asked Mar 14 '11 02:03

Peter


2 Answers

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.

like image 184
Haochi Avatar answered Oct 21 '22 18:10

Haochi


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!"
      });
}
like image 3
Peter Avatar answered Oct 21 '22 17:10

Peter