Google Maps API v3 - why no context with events?

Question

Using Google Maps API v3 for the first time and I've got a map with a bunch of markers. I wanted to make it so when you click one, a specific InfoWindow will display (specific to the marker you clicked). I was really surprised that the click event doesn't tell you the actual marker that was clicked!

I know there is a solution using a separate method to create a closure but that seems like a hack to me. Is there a better way to do it? Or, is there a way to ask the map "what markers exist at this position" and pass in the position from the event argument?

I expected events to work like this:

google.maps.event.addListener(marker, 'click', function(event, obj)
{
    //Now I can work with "obj" - the thing that was clicked.
});

score 10 · Accepted Answer · answered Mar 17 '11 at 01:29

10

You should just refer to 'this' in the event listener.

google.maps.event.addListener(marker, 'click', function(e) {
  // this == marker;
  // e == MouseEvent
});

answered Mar 17 '11 at 01:29

skarE

5,880
2
23
23

That's what I was looking for and I thought about it but didn't bother to try it out! Thanks. – Josh M. Mar 17 '11 at 01:54

sergo911 · Answer 2 · 2018-10-18T19:49:17.867

let mousemoveDraw = this.mousemoveDraw.bind(this);
    let mousedown_event_DrawPolygonByFinger = this.mousedown_event_DrawPolygonByFinger.bind(this);
    let mouseup_event_DrawPolygonByFinger = this.mouseup_event_DrawPolygonByFinger.bind(this);

    this.mapInst.addEvents([
        { type: 'mousedown', event : mousedown_event_DrawPolygonByFinger },
        { type: 'mousemove', event: mousemoveDraw },
        { type: 'mouseup', event : mouseup_event_DrawPolygonByFinger }
    ]);

mapInst - is wrapper on google and yandex map. It is may use this way in callbacak

 //event drawing event
mousemoveDraw(event : any){
    console.log('mousemoveDraw')
    console.log(this)
    console.log(this.stateDrawing)
    try{
        if (this.stateDrawing != 1){
            console.log(this.stateDrawing)
            let lat = event.latLng.lat();
            let lng = event.latLng.lng();
            console.log(lat,lng)
            this.polyLine.pushCoord({ lat, lng });
        }
    }catch(e){
        console.log('error Polyline.mousemoveDraw : ',e.message);
    }
}

Could you translate that comment please? – Matt Oct 15 '18 at 07:53 — Matt, Oct 15 '18 at 07:53

RedBlueThing · Answer 3 · 2011-03-17T01:26:23.843

0

I think it would be a mistake to try and hunt down the marker object based on the position of the click event. Using closures to associate the event with a particular marker seems like a valid solution to me. I would create a function that looks something like this:

function createMarker (point, map)
{
    var marker = new google.maps.Marker({
            position: point,
            map: map,
            title: "blah"});

    marker.stuffOnTheMarker = "Some interesting stuff";

    var content = buildSomeContentForThisMarker ();

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.close ();
            infowindow.setContent(content); 
            infowindow.open(map,marker);

            // access the marker than caused this event
            alert (marker.stuffOnTheMarker);
        });
}

edited Mar 17 '11 at 01:26

answered Mar 17 '11 at 01:16

RedBlueThing

42,006
17
96
122

Okay, that seems to be the only way I guess but it really feels dirty. I wonder why they didn't implement their events so you can do: google.maps.event.addListener(marker, 'click', function(event, obj) {...}) where "obj" is the thing that caused the event. – Josh M. Mar 17 '11 at 01:18
I guess because closures gives you that. You can access the marker from the click event callback. (updated answer) – RedBlueThing Mar 17 '11 at 01:25

score 0 · Answer 4 · answered Mar 17 '11 at 01:18

0

How is that a hack when it's provided by the API? What you are describing is a hack. When you click on the marker, it will pass an event which contains the lat & lng.

google.maps.event.addListener(marker, 'click', function(e) {
  console.log(e); // { x: 0, y: 0 }
});

answered Mar 17 '11 at 01:18

HChen

2,141
13
12

No, what I described is not a hack at all - see my updated question, maybe I was unclear. Thanks for the input. – Josh M. Mar 17 '11 at 01:53

Google Maps API v3 - why no context with events?

4 Answers4

Linked