Marker Click trigger map click event

[Tyghe Vallard]

This is a version 3 map. I've just been using the google playground to debug this issue.

http://code.google.com/apis/ajax/playground/?exp=maps#markers_v3 

Basically what I'm trying to do is quite simple. When you click on a marker I want to have the map panTo that marker. This does work with the current code, however, it generates an error since there is no MouseEvent sent to the original 'click' event for the map.

I've tried to create a fake MouseEvent object such as

var event = new Object(); 
event['latLng'] = marker.getPosition();

before I trigger the 'click' event and then send that object as a parameter in the trigger method

google.maps.event.trigger( map, 'click', event );

The problem with that is it will assign the last marker's position to every event object an the result is no matter the marker you click on it the map will panTo the last marker added to the map.

You will notice that the following code runs and actually behaves as intended, but it still generates an error in the console that I'm trying to avoid for sake of mind.

      var map;
      
      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
        map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      
        google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
        google.maps.event.addListener( map, 'click', function(e) {
          map.panTo( e.latLng );
        });
      }
      
      function addMarkers() {
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var lat = southWest.lat() + latSpan * Math.random();
          var lng = southWest.lng() + lngSpan * Math.random();
          var latLng = new google.maps.LatLng( lat, lng );
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
          new google.maps.event.addListener( marker, 'click', function(e) {
            new google.maps.event.trigger( map, 'click' );
          });
        }
      }
      
      google.maps.event.addDomListener(window, 'load', initialize);

[Rossko]

>           new google.maps.event.addListener( marker, 'click', function(e) {
>             new google.maps.event.trigger( map, 'click' );

Why try to trigger a map event ; just replace with code to do what you
want directly (pan to the marker's location) ?

> The problem with that is it will assign the last marker's position to every
> event object an the result is no matter the marker you click on

That will be due to not getting function closure on the 'marker'
variable ; there are many threads about this usually manifesting as
"all infowindows are the same"
See this example
http://code.google.com/apis/maps/documentation/javascript/examples/ev...
the important feature is removing the listener creation to a seperate
function, which allows for function closure on the content. It's not
an easy concept.

[Tygertown]

The example I was using in the Google Playground was just to try and
figure out how to get the functionality to work correctly. I need to
trigger the event because in the actual code I have 3 maps and need to
trigger the click event on a different map than the one that has the
marker.

I just read briefly about function closures and I think I have an idea
of what is going on. If I create a function outside of the outer
function(addMarkers) is there any way to know which marker was clicked
on?

I thought that the click event for markers only sent a Event as a
parameter?

On Dec 22, 2:56 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> >           new google.maps.event.addListener( marker, 'click', function(e) {
> >             new google.maps.event.trigger( map, 'click' );
>
> Why try to trigger a map event ; just replace with code to do what you
> want directly (pan to the marker's location) ?
>
> > The problem with that is it will assign the last marker's position to every
> > event object an the result is no matter the marker you click on
>
> That will be due to not getting function closure on the 'marker'
> variable ; there are many threads about this usually manifesting as
> "all infowindows are the same"

> See this examplehttp://code.google.com/apis/maps/documentation/javascript/examples/ev...

[Rossko]

> I just read briefly about function closures and I think I have an idea
> of what is going on. If I create a function outside of the outer
> function(addMarkers) is there any way to know which marker was clicked
> on?

Read some more and have a play with code. Taking code out to another
function and passing arguments to it is indeed the key to achieving
closure. The clever part of closure, is that it will "capture" passed-
in data at the time that you create the event listener for each
marker ; when a listener is actually triggered, that data will be
available by the magic of closure. Could be a marker object or
whatever else you want.

[JoshN]

You can also add an id to the markers as you create them, then catch
the click event and return the marker by id. While using closure is
simpler to implement, catching the event leaves a smaller footprint in
memory, as you can just test the event to see if it is a marker rather
than listening to every marker object. I have an implementation using
prototypejs, but I have not gotten around to coding this in regular
js, but I think others have posted on this topic elsewhere in the
forum.

Josh