Question

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);
}

Answer 1

I would think the simplest way to do it would be to assign your markers to arrays, with each marker upon creation having setMarker(null). You’d either use a separate array for each category, or a single array of objects each with a category attribute. Then when the user clicks on a category you would iterate through the appropriate array and setMarker(map) for each of its markers.