Google Maps API - Marker not showing
- by popnbrown
I'm trying to add markers for every single row from a table, that sits on the page. The page is http://www.sravanks.com/first/2013ftcmap.php
This is the JS code that's loading the markers:
$(document).ready(function() {
var mapOptions = {
center: new google.maps.LatLng(39.740, -89.503),
zoom: 7
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow();
/* City Markers */
var cityCircle = new Array();
var i = 0;
$.each($('.events tr'), function(index, value) {
var name = $(this).find('td:first()').html();
var address = $(this).find('.address').html();
var linkUrl = "http://www.sravanks.com/first/geocode.php?address=" + address;
$.ajax({
url: linkUrl
}).done(function(data){
var json = $.parseJSON(data.substring(0, data.length-1));
lat = json.results[0].geometry.location.lat;
lng = json.results[0].geometry.location.lng;
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({ position: latlng, map: map, icon: 'map-pointer-medium.gif' });
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(name);
infowindow.open(map, marker);
cityCircle[i] = new google.maps.Circle({strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.35, map: map, center: latlng, radius: 144841});
i++;
});
});
});
/*Team Markers*/
var markers = {};
var teamName, teamNumber, lat, lng, content;
$.each($('.list tr'), function(index, value) {
teamName = $(this).find('td.name').html();
teamNumber = $(this).find('td.number').html();
markers[teamNumber] = {};
lat = parseFloat($(this).find('td.lat').html());
lng = parseFloat($(this).find('td.lng').html());
content = "Name: " + teamName + "<br />Number: " + teamNumber;
markers[teamNumber]['latlng'] = new google.maps.LatLng(lat, lng);
markers[teamNumber]['marker'] = new google.maps.Marker({ position: markers[teamNumber]['latlng'], map: map });
google.maps.event.addListener(markers[teamNumber]['marker'], 'click', function() {
infowindow.setContent(content);
infowindow.open(map, markers[teamNumber]['marker']);
});
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
for(var i=0;i<cityCircle.length;i++){
cityCircle[i].setMap(null);
}
});
});
I've got no errors, but the Team Markers do not show up. The strange thing is that the City Markers do show up.
Some more info, the City Markers ajax call is just to a proxy that calls the google geocoding api. Again the link's at http://www.sravanks.com/first/2013ftcmap.php
