Google maps hide marker (and info) and only show when you click on an area that has info.

Question

I want to add a transparent png into google maps instead of using the default icon. Where in my sample code would I change the default icon to a png named transparent.png?

Thanks!

 function onLoad() {
      map = new GMap(document.getElementById("div_map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(54, -3), 5);

      getMarkers();

      GEvent.addListener(map, "click", function(overlay, point) {
       if (overlay){ // marker clicked
        overlay.openInfoWindowHtml(overlay.infowindow); // open InfoWindow
       } else if (point) { // background clicked

       }
      });
    }

 function getMarkers(){
     var urlstr="read.php";
     var request = GXmlHttp.create();
     request.open('GET', urlstr , true); // request XML from PHP with AJAX call
     request.onreadystatechange = function () {
   if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    locations = xmlDoc.documentElement.getElementsByTagName("location");
    markers = [];
    if (locations.length){
     for (var i = 0; i < locations.length; i++) { // cycle thru locations
      markers[i] = new GMarker(new GLatLng(locations[i].getAttribute("lat"),locations[i].getAttribute("lng")));
      // Add attributes to the marker so we can poll them later.
      // When clicked, an overlay will have these properties.
      markers[i].infowindow = "This is "+locations[i].getAttribute("name");

      // Useful things to store on a marker (Not needed for this example, could be removed)
      // Tells you what index in the markers[] array an overlay is
      markers[i].markerindex = i;
      // Store the location_id of the location the marker represents.
      // Very useful to know the true id of a marker, you could then make
      // AJAX calls to the database to update the information if you had it's location_id
      markers[i].db_id = locations[i].getAttribute("location_id");

      map.addOverlay(markers[i]);

     }
    }
   }
  }
  request.send(null);
    }

Answer 1

So you don't want the marker to show at all? Just react by launching the popup? I'd swap the icon with custom clear pngs.

http://code.google.com/apis/maps/documentation/reference.html#GIcon

Answer 2

You can use an almost invisible PNG file as a marker in a normal GIcon.image, you just need to be careful that there's something that's not 100% transparent to be used as the click target. That could either be the GIcon.image or the GIcon.transparent. Some browsers don't process clicks on objects that are 100% transparent.

One problem with this approach is that the clickable region will vary as the zoom level changes. Al alternative approach would be to draw invisible clickable polygons to mark the areas that have info. In this case the polygons can be 100% transparent because the API doesn't rely on the browser detecting whether the polygon has been clicked.