Google Maps API - Marker not showing

Posted by popnbrown on Stack Overflow See other posts from Stack Overflow or by popnbrown
Published on 2014-06-09T03:20:04Z Indexed on 2014/06/09 3:25 UTC
Read the original article Hit count: 212

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about php