I am using this code to create a Google map with 3 points that are hidden within one and when the one marker is clicked thepoints either get merged into the one or they open up into 3 separate ones, however the map is not appearing can any one examine my code and see the potential problem?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>favorite cities</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
(function() {
window.onload = function(){
var options = {
zoom: 3,
center: new google.maps.LatLng(37.99, -93.77),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var mgr = new MarkerManager(map);
var A = new google.maps.Marker({
position: new google.maps.LatLng(37.99, -93.77),
icon: 'img/cluster.png'
});
google.maps.event.addListener(A, 'click', function() {
map.setZoom(7);
map.setCenter(Kloof.getPosition());
});
var Cities = [A];
var Schools = [
//SChool1
new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
//School2
new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
//School3
new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
];
google.maps.event.addListener(mgr, 'loaded', function() {
agr.addMarkers(Cities, 11, 6);
agr.addMarkers(Schools, 6);
agr.refresh
});
};
})();
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>I changed the code to the following:
<
var schoolArray = []; //Global array to store the POINTS
var SchoolPoints = [[-29.788911, 30.852721, 'Thomas More College'], //I am creating a global array to store the MARKERS
[-29.781297, 30.838465, 'Kloof Senior Primary School'],
[-29.827008, 30.881706, 'Pinetown Boys HighSchool']];
function initialize() { //I am initializing the google map and how it will appear on my dashboard
var myOptions = {
zoom: 9,
center: new google.maps.LatLng(-29.807762, 30.854261),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mcOptions = { //this is where i determine BY GRID the amount of tiles that will determine if my schools points cluster or if they are separate and also the max zoom level the individual points are visual at
gridSize: 25,
maxZoom: 20
};
var mc = new MarkerClusterer(map, [], mcOptions); //this creates the blue cluster you see initially on the map
google.maps.event.addListener(map, 'click', function() { //upon click the map zooms in and displays the 3 schools with separate markers
infowindow.close();
});
// This is where the markers are added to the map and sorted into the cluster
for(var i=0; i<SchoolPoints.length; i++){ //This is where where i am setting up my markers on the map based off the number of elements within the points array
createMarker(new google.maps.LatLng(SchoolPoints[i][0], SchoolPoints[i][1]), SchoolPoints[i][2]);
}
mc.addMarkers(schoolArray , true); //now the markers are clustered together in the blue symbol
}
var infowindow = new google.maps.InfoWindow({ //I am determining the size of the info window that will be displayed by my school points
size: new google.maps.Size(500, 250)
});
function createMarker(latlng, html) { //this function is where i create the individual markers
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: '',
});
marker.setAnimation(google.maps.Animation.DROP); //I decided for aesthetic reasons i would like to see if i could animate the markers and so i added a drop animation
google.maps.event.addListener(marker, 'click', function() { //when clicking the markers their info windows are displayed
infowindow.setContent(contentString); //This sets the info window to have the content listed in the array visible
infowindow.open(map, marker);
});
schoolArray.push(marker);
}
window.onload = initialize;