Question

I’m writing a custom overlay for a Google Map. I have a serious of lat-long points, and I want to images with arrows pointing to and from them. I’m following Google’s custom overlay tutorial (https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays).

In my overlay’s “constructor,” this line fails:
‘this.setMap(this.map_);’

What do I need to do to make it work?

This is my overlay’s “constructor.” The broken line is at the bottom. All of the calls to “alert” are in there as I’m testing. The last call isn’t reached, which is why I think ‘this.setMap()’ isn’t working.

 //This serves as a constructor for a link overlay
 function LinkOverlay(startNodeCoordinates, endNodeCoordinates, map)
 {
    alert("constructor start");
    this.map_ = map;

    //These are the lat-long coordinates of where the link starts and ends
    this.startNodeCoordinates_ = startNodeCoordinates;
    this.endNodeCoordinates_ = endNodeCoordinates;

    alert("constructor coordinates stored");

    // We define a property to hold the image's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    alert("constructor div saved");

    //We need to know if we draw the arrow up or down and left or right.
    //We calculate this by finding the bearing between the two nodes. If
    //the bearing is N to NE, then the arrow goes up and to the right,
    //for example. If the bearing is E to SE, then the arrow goes down
    //and to the right, and so on.

    //Calculate bearing
    /*
     * This algorithm determines the bearing (or angle) between two coordinate points.
     * It was adapted from http://www.movable-type.co.uk/scripts/latlong.html
     */
    alert("constructor calculating bearing")
    this.bearing_ = null;
    var lat1 = this.startNodeCoordinates_.lat();
    var lat2 = this.endNodeCoordinates_.lat();
    var dLon = this.startNodeCoordinates_.lng() - this.endNodeCoordinates_.lng();
    var y = Math.sin(dLon) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) -
        Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    this.bearing_ = Math.atan2(y, x);

    alert("constructor bearing found (bearing = " + this.bearing_ + ")");

    this.arrowUp_ = null;
    this.arrowRight_ = null;
    this.image_ = null;

    alert("constructor picking image");

    if((this.bearing_ >= 0 && this.bearing_ < (Math.PI * 0.5)) || this.bearing_ == (Math.PI * 2))
    {
        alert("constructor NE");
        //If bearing is N to NE, the arrow goes up and to the right
        this.arrowUp_ = new Boolean(true);
        this.arrowRight_ = new Boolean(true);
        this.image_ = "../../Content/map_images/link_overlay/up_right_black.png";
    }
    else if(this.bearing_ >= (Math.PI * 0.5) && this.bearing_ < Math.PI)
    {
        alert("constructor SE");
        //If bearing is E to SE, the arrow goes down and to the right
        this.arrowUp_ = new Boolean(false);
        this.arrowRight_ = new Boolean(true);
        this.image_ = "../../Content/map_images/link_overlay/down_right_black.png";
    }
    else if(this.bearing_ >= Math.PI && this.bearing_ < (Math.PI * 1.5))
    {
        alert("constructor SW");
        //If bearing is S to SW, the arrow goes down and to the left
        this.arrowUp_ = new Boolean(false);
        this.arrowRight_ = new Boolean(false);
        this.image_ = "../../Content/map_images/link_overlay/down_left_black.png";
    }
    else
    {
        alert("constructor NW");
        //If bearing is W to NW, the arrow goes up and to the left
        this.arrowUp_ = new Boolean(true);
        this.arrowRight_ = new Boolean(false);
        this.image_ = "../../Content/map_images/link_overlay/up_left_black.png";
    }

    alert("constructor adding to map");

    // Explicitly call setMap() on this overlay
    this.setMap(this.map_);

    alert("constructor end");
 }

 //This "subclasses" a link overlay from Google Map's OverlayView class
 LinkOverlay.prototype = new google.maps.OverlayView();

This is the code that creates new LinkOverlays (in Razor syntax):

@:var startNodeCoordinates = new google.maps.LatLng('@startNode.Latitude', '@startNode.Longitude');
@:var endNodeCoordinates = new google.maps.LatLng('@endNode.Latitude', '@endNode.Longitude');
@:var routeLine = new LinkOverlay(startNodeCoordinates, endNodeCoordinates, networkMap);

Answer 1

I had the same problem. I fixed it using ‘new’ to instanciate my custom overlay.
In your case, are you sure that when instanciate your overlay, you use :

linkOverlay = new LinkOverlay(s, e, map)