How to get LatLng() from marker after click event?

1,612 views
Skip to first unread message

Nijs9

unread,
Jun 11, 2010, 5:11:05 AM6/11/10
to Google Maps JavaScript API v3
I create a custom marker in this way, but when I add the click event I
dont know how to get the Latitude and longitude out of that marker.
Does anybody know how to do it?:

// create the marker
var image = new google.maps.MarkerImage('http://www.vfr.be/Images/
waypoint.png',
new google.maps.Size(20, 20),
new google.maps.Point(0,0),
new google.maps.Point(10, 10));
var myLatLng = new google.maps.LatLng(lat, lng);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});

google.maps.event.addListener(beachMarker, 'click', function(){

alert(beachMarker.LatLng() + "|" + beachMarker.lng());
startPoint = true;

});

Miguel Angel Vilela

unread,
Jun 11, 2010, 5:33:16 AM6/11/10
to google-map...@googlegroups.com

Try with beachMarker.getPosition()



--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Nijs9

unread,
Jun 11, 2010, 5:39:38 AM6/11/10
to Google Maps JavaScript API v3
Thanks, but in this way he takes the position of the last added
marker. I use a loop to add more than 100 markers, in this way I get
only the position of the last added, on each marker i click...

On 11 jun, 11:33, Miguel Angel Vilela <mig...@google.com> wrote:
> Try with beachMarker.getPosition()
>
> http://code.google.com/apis/maps/documentation/javascript/reference.h...
> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B­unsub...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.- Tekst uit oorspronkelijk bericht niet weergeven -
>
> - Tekst uit oorspronkelijk bericht weergeven -

Miguel Angel Vilela

unread,
Jun 11, 2010, 5:48:24 AM6/11/10
to google-map...@googlegroups.com
Ah, you have many markers, in that case you need to keep track of them, e.g. in an Array.

To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.

Sven Nijs

unread,
Jun 11, 2010, 6:06:53 AM6/11/10
to google-map...@googlegroups.com
Do you have time to help me with that? I don't know how to start... I tried it this way:
 
var myLatLng = new google.maps.LatLng(lat, lng); 
  pointMarker.push(new google.maps.Marker({ 
      position: myLatLng, 
      map: map,
      icon: image 
  }));
  locMarker.push(myLatLng);
  
  google.maps.event.addListener(pointMarker[i], 'click', function(event){
															   
    
	alert(locMarker[i]);
	startPoint = true;
	
  }); 


2010/6/11 Miguel Angel Vilela <mig...@google.com>

Miguel Angel Vilela

unread,
Jun 11, 2010, 6:14:29 AM6/11/10
to google-map...@googlegroups.com

That doesn't look too bad, but I can't try it properly without the rest of the page.
I'd keep an array with the markers themselves, so that I could later on remove them from the map, but that's up to you.

Sven Nijs

unread,
Jun 11, 2010, 6:25:46 AM6/11/10
to google-map...@googlegroups.com
Indeed, now I have an array of markers, but when I click I just get the last added position of the last marker... This is the hole script:
 
<script type="text/javascript">
//<![CDATA[
   
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
   var pointMarker = [];
   var locMarker = [];
 
     // global "map" variable
      var map = null;
  
   var startPoint = false;
   var endPoint = false;
   var track = [];
   var startTrack = null;
 
function initialize() {
  // create the map
  var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(51.05288, 4.88080),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("googlemapdraw"),
                                myOptions);
  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addTrack);

      // Read the data from example.xml
      downloadUrl("ClientBin/Data/nodes.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("wpt");
  var markers2 = xmlDoc.documentElement.getElementsByTagName("wpt");
  var teller = 0;
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lon"));
          var point = new google.maps.LatLng(lat,lng);
    
    var buren = markers[i].getElementsByTagName("wptrte");
   
    for (var i1 = 0; i1 < buren.length; i1++) {
    
     var kp = buren[i1].getAttribute("kpt");
    
     for (var i2 = 0; i2 < markers2.length; i2++) {
     
      var name = markers2[i2].getElementsByTagName("name");
      var n = name[0].childNodes[0].nodeValue;
     
      if (n == kp) {
      
  var lat1 = parseFloat(markers2[i2].getAttribute("lat"));
          var lng1 = parseFloat(markers2[i2].getAttribute("lon"));
   
    var flightPlanCoordinates = [
    new google.maps.LatLng(lat, lng), 
    new google.maps.LatLng(lat1, lng1)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#22627B",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
 
  flightPath.setMap(map);
      
      //alert(lat1 + " " + lng2);
      break;
      }           
     }          
    }
          // create the marker
  var image = new google.maps.MarkerImage('http://www.netkaart.be/Images_routeplanner/waypoint.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 20),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(10, 10));
  var myLatLng = new google.maps.LatLng(lat, lng);
  pointMarker.push(new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  }));
  locMarker.push(lat);

 
  google.maps.event.addListener(pointMarker[i], 'click', function(event){
                 
   
 alert(locMarker[i]);
 startPoint = true;
 
  });
 
        }
      });
    }
 
 function addTrack(event) {
 
 alert(event.latLng);
  
 }
 
//]]>
</script>

Rossko

unread,
Jun 11, 2010, 7:46:10 AM6/11/10
to Google Maps JavaScript API v3
> Indeed, now I have an array of markers, but when I click I just get the last
> added position of the last marker...

You're not getting function closure on the selected marker, because
you're not using a markercreate() or some similar function to get
closure on.

See this thread
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/30b3f94096ae3e6b/be337ad66dd2c19e
Reply all
Reply to author
Forward
0 new messages