Create Marker Categories & Display Markers on Click Only
- by MizAkita
I am trying to create marker categories and display markers on click...
For example, "Eat", "Banks", "Places of Interest" and clicking on them would produce only the markers in those categories. You can see it live HERE
Here is a code snippet:
//<![CDATA[
//<![CDATA[
var map = null;
var gmarkers = [];
var gicons = [];
var icon = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(37.979183,-121.302381),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
///////////////////////// EATS //////////////////////////////////////////////
var point = new google.maps.LatLng(37.988012,-121.311901);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/tigeryogurt.jpg" /></center><br><b>Tiger Yogurt</b><small><br>4343 Pacific Avenue<br>209.952.6042<br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[0]
var point = new google.maps.LatLng(37.987054,-121.311655);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/mwbakery.jpg" /></center><br><b>M&W Bakery<br>Cakes & Sandwiches</b><small><br>4343 Pacific Avenue<br>209.473.3828<br><br>On the web visit:<br><a href="http://www.mandwdutchamericanbakery.com" target ="_blank">MandWDutchAmericanBakery.com<\/a><br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[1]
Currently, all markers display. I can easily get the markers not to display... however, i am trying to have only categories display and individual listings to display on click only!
CREATE MARKER FUNCTION:
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function triggerClick(i) {
google.maps.event.trigger(gmarkers[i],"click")
};
function createMarker(latlng, html, img) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: img,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
}
