google maps issue no markers showing up on map

Question

I have created the following js fiddle. can anyone take a look to see whats wrong I see the data being passed all the way to markers.push(marker) but nothing shows up on the map?

It's probably something dumb but I don't see what it could be.

 var locations = [
  ['William T Morrisey Blvd', -42.319081, -71.048592, 6],
  ['William T Morrisey Blvd', -42.319081, -71.048592, 5],
  ['TD Garden', 42.369952, -71.061723, 4],
  ['Terminal C Logan Airport', 42.366906, -71.016455, 3],
  ['Cambridge', 42.373570, -71.110249, 2],
  ['Hardvard', 42.376883, -71.116773, 1]
];

var map;
var markers = []; 

function setMarkers(locations) {



for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][2], locations[i][3]),
    map: map,
    animation: google.maps.Animation.DROP,
    title: 'Hello World!',
  });
    markers.push(marker);


  console.log(locations);

}
}


function initialize() {

   var latlng = new google.maps.LatLng(42.3520576,-71.0726147);


       var myOptions = {
                            zoom: 13,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDefaultUI: false,
                            scrollwheel: true,
                    };



var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

    setMarkers(locations);


            }

    initialize();

JS FIDDLE:

http://jsfiddle.net/p646xmcr/498/

Answer 1

You have redeclare the map var inside the function the wrong place

function initialize() {

  var latlng = new google.maps.LatLng(42.3520576, -71.0726147);


  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false,
    scrollwheel: true,
  };



 //      var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
 //remove ^^ this var declaration 

  map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

 setMarkers(locations);


}