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

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 "+loca开发者_JS百科tions[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);
    }

---

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.

---

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