Reputation: 589
I have the below code running to show markers on a map in an array thats separate from my GeoLocation marker. It's easy to make a simple external link but how do I create the same in array markers, also any reason why this doesn't work in IE?
JS:
//Retina Images
var RetinaHotelMarker = new google.maps.MarkerImage("./assets/images/global/[email protected]", null, null, null, new google.maps.Size(30,30));
var RetinaChurchMarker = new google.maps.MarkerImage("./assets/images/global/[email protected]", null, null, null, new google.maps.Size(30,30));
var RetinaCrosshair = new google.maps.MarkerImage("./assets/images/global/[email protected]", null, null, null, new google.maps.Size(30,30));
var RetinaMarker = new google.maps.MarkerImage("./assets/images/global/[email protected]", null, null, null, new google.maps.Size(30,30));
//Markers
var markers = [
[1, 'Great Fosters', 51.416741,-0.543854, RetinaHotelMarker],
[2, 'St Matthews', 51.432327,-0.459162, RetinaChurchMarker],
// Staines
[3, 'Travel Lodge Staines', 51.435698,-0.514469, RetinaMarker]
];
// Geolocation Success
function success(position) {
// Create Canvas
var mapcanvas = document.createElement('div');
mapcanvas.id = 'global_map_container';
document.querySelector('article').appendChild(mapcanvas);
// Map Options
var options = {
zoom: 12,
//center: coords,
center: new google.maps.LatLng(51.416741,-0.543854),
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create Map
var map = new google.maps.Map(document.getElementById("global_map_container"), options);
// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
var bounds = new google.maps.LatLngBounds();
// Marker Creation
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][2], markers[i][3]),
map: map,
flat: true,
icon: markers[i][4]
});
// Find Bounds
bounds.extend(marker.getPosition());
// Marker Center
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// Center on marker
map.setCenter(marker.getPosition());
infowindow.setContent(markers[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Make Map fit all Markers
map.fitBounds(bounds);
// Get Geolocation Lat/Lng
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Create Geolocation Marker
var GeoMarker = new google.maps.Marker({
position: coords,
map: map,
icon:RetinaCrosshair,
title:"You are here!",
});
//Button Controls
google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() {
map.setCenter(GeoMarker.getPosition() );
});
}
// Run GeoLocation check
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
HTML:
<ul>
<li><a href="#" id="Map_GeoLocation" class="global_crosshair"><span>Find Me</span></a></li>
<li><a href="#" id="Map_Church" class="global_church"><span>The Church</span></a></li>
<li><a href="#" id="Map_Hotel"class="global_hotel"><span>The Venue</span></a></li>
</ul>
Upvotes: 2
Views: 1840
Reputation: 161334
Make an array of google.maps.Markers (in the global scope), trigger a 'click' event on the appropriate marker
// Marker Creation
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][2], markers[i][3]),
map: map,
flat: true,
icon: markers[i][4]
});
gmarkers.push(marker);
// Find Bounds
bounds.extend(marker.getPosition());
// Marker Center
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// Center on marker
map.setCenter(marker.getPosition());
infowindow.setContent(markers[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
Then to click on the first marker:
google.maps.event.trigger(gmarkers[0],'click');
Upvotes: 2