Uncaught TypeError: Cannot read property getZoom of undefined
I'm new to Google Map, so please excuse if this is a dumb question.
I am trying to use Marker Cluster parameter with Google Maps
This is my code
var map;
var global_markers = [];
var markers = [
[37.09024, -95.712891, 'trialhead0'],
[37.09024, -95.712891, 'trialhead1'],
[37.09024, -95.712892, 'trialhead2']
];
var infowindow = new google.maps.InfoWindow({});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker();
}
function addMarker() {
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i][0]);
var lng = parseFloat(markers[i][1]);
var trailhead_name = markers[i][2];
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
});
marker['infowindow'] = contentString;
global_markers[i] = marker;
global_markers.push(marker);
google.maps.event.addListener(global_markers[i], 'click', function() {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
var markerCluster = new MarkerClusterer(map, global_markers);
window.onload = initialize;
When I run this code I am getting the following exception in the browser console
Uncaught TypeError: Cannot read property getZoom of undefined
This is my violin
http://jsfiddle.net/ZLuTg/1023/
How do I resolve this?
map
is only created in the window's onload handler, but it is passed to the constructor MarkerCluster
as an argument before it. That's why undefined.
Make sure it's MarkerCluster
built after map
.
http://jsfiddle.net/ZLuTg/1025/