Google Maps Infobox on Custom HTML Marker

0
votes

I'm trying to get an infobox to open after clicking an overlay(custom HTML marker).

This map shows a typical marker and a customer HTML marker. When I click the typical marker, the infobox opens correctly. When I click the custom HTML marker, the infobox doesn't open with error msg: TypeError: anchor.getPosition is not a function. This relates to the incorrect parameters I'm passing to infobox.open(). It expects a marker, but since I'm clicking an overlay (custom HTML marker), the parameter passed is incorrect.

How can I adjust the infobox.open() function so that it accepts my overlay as a parameter?

<!DOCTYPE html>
<html>
<style>

#map{
    height: 600px;
    width: 600px;
}

</style>
<body>
<div id="map"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="....path/to/custom-html-markers-google-maps.js"></script>
<script>

var infobox = new InfoBox({
    disableAutoPan: false,
    maxWidth: 300,
    pixelOffset: new google.maps.Size(-75, -70),
    zIndex: null,
    boxStyle: {width: '150px'},
    infoBoxClearance: new google.maps.Size(15, 50)
});


function initialize() {

    var loc =        new google.maps.LatLng(-33.89, 151.26);
    var locMarker =  new google.maps.LatLng(-33.89, 151.23);

    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: loc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //This works FINE.. It sets the marker and infobox listener
    var marker = new google.maps.Marker({
        map: map,
        position: locMarker,
        visible: true
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>');
        infobox.open(map, this);
    });


    //Overlay from: http://humaan.com/custom-html-markers-google-maps/
    var overlay = new CustomMarker(loc, map, {marker_id: '123'});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

Part of Custom HTML Marker script:

google.maps.event.addDomListener(div, "click", function(event) {

    infobox.setContent('<div style="background-color:yellow">Hi there</div>');
    infobox.open(map, this);  //*******THIS IS THE PROBLEM********

    google.maps.event.trigger(self, "click");
});

My problem is infobox.open(map, this); is expecting a marker and I give it the "div". How can I adjust this function so that it accepts my div?

Full script: http://humaan.com/custom-html-markers-google-maps/

2
javascriptgoogle-mapsgoogle-maps-api-3

2 Answers

1
votes

To use anything as an anchor for a marker, it needs to expose a latLng position property and an optional anchorPoint property.

from the documentation:

open(map?:Map|StreetViewPanorama, anchor?:MVCObject)

Return Value: None

Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

0
votes

I wasn't carrying the correct loc(lat/lng) and map into the function call.

Here is the revised listener:

google.maps.event.addDomListener(div, "click", function(event) {

    var map =   self.getMap();
    var loc =   self.latlng;

    infobox.setContent('<div style="background-color:yellow">Hi there</div>');
    infobox.openRevised(map, this, loc);

    google.maps.event.trigger(self, "click");
});

Here is the revised infobox.open() function:

InfoBox.prototype.openRevised = function (map, anchor, loc) {

    if (anchor) {

        this.position_ = loc;
    }

    this.setMap(map);
};