Google maps (api3): Returnera kordinater onClick på marker

google.maps.event.addListener(marker, 'click', function(e) {
    alert(e.latLng);
});

Hej Spin,

Jag förstår inte hur det där fungerar. Om man klickar på en marker. Exekveras då funktionen "function" med "e" som input?

Mitt kartobjekt ser ut som nedan...

var map, geocoder; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    // set the default map orientation...
    var latlng = new google.maps.LatLng(28.033886, 1.659626); 

    var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeControl: false,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    } 

    // DRAW MAP...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // CALL ADD MARKERS FUNCTION...
    funAddMarkers()

    // CHANGE MAP TYPE...
    // map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    
}

Mattias Nordin skrev:

Jag förstår inte hur det där fungerar. Om man klickar på en marker. Exekveras då funktionen "function" med "e" som input?

Ja, i stort sett. Det kallas för "closures", när man skickar funktioner som parametrar till andra funktioner/metoder i klasser. I det här fallet består vårat closure av en anonym funktion - men man hade lika gärna kunnat använda en namngiven funktion:

function handleMarkerClick(e) {
   alert("A clicked marker on latlng: " + e.latLng);
}

google.maps.event.addListener(marker, 'click', handleMarkerClick);

Parametern "e" tas emot som själva händelsen (event på eng.), och kan innehålla all möjlig information beroende på implementationen av addListener(). Hos Google valde man dock att sålla bort DOM-beroendet hos lyssnaren och skapade en egen implementation som enbart sätter ett objekt med egenskapen för positionen där händelsen inträffade. Således: "e.latLng" ger tillbaka ett objekt av typen google.maps.LatLng.

Eller menade du att det inte fungerade? Som sagt har jag inte jobbat i v3 på länge (eller ens speciellt mycket), så jag har inte full koll. Dock borde det fungera ;)

Det var en utmärkt förklaring. Förstår lite bättre nu.

Men e.latLng = undefined för mig

Jag har min listner inuti en loop varav det skapas en listner per marker. Är det verkligen så man ska göra?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map, geocoder; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    // set the default map orientation...
    var latlng = new google.maps.LatLng(28.033886, 1.659626); 

    var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeControl: false,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    } 

    // DRAW MAP...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // CALL ADD MARKERS FUNCTION...
    funAddMarkers()

    // CHANGE MAP TYPE...
    // map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    
} 

// ----------------
// ADD MARKER FUNCTION
// ----------------
    var markersArray = []; 
    var markersArrayDistributor = []; 
    function funAddMarkers(){

       //alert("gVarLocationString  = " +gVarLocationString )
       
       arrLocation = gVarLocationString .split(" : ")
       
       for(var i = 0; i < arrLocation.length; i++){ 

           arrXY = arrLocation[i].split(",")

            x = arrXY[0]
            y = arrXY[1]
            varType = arrXY[2]
           // alert("." +varType +".")
           
           if(varType == "Wholesaler"){
          
               varImage = "http://mattiasnordin.net/flir/pin_wholesaler.png"
          
           } else if(varType == "Distributor"){
          
               varImage = "http://mattiasnordin.net/flir/pin_distributor.png"
          
          } else if(varType == "Agent"){
          
               varImage = "http://mattiasnordin.net/flir/pin_agent.png"
          
          } else if(varType == "FLIR office"){
          
               varImage = "http://mattiasnordin.net/flir/pin_flir.png"

           } else {
          
               varImage = "http://mattiasnordin.net/flir/pin_other.png"
          
           }
            
           // DRAW MARKERS...
           var myLatLng = new google.maps.LatLng(x,y);
           var marker = new google.maps.Marker({
                 position: myLatLng,
                 map: map,
                 icon: varImage,
                 title: varType,
                 type: varType
           });

           // ADD MARKER TO ARRAY...
           markersArray.push(marker); 

          // ON CLICK LISTNER...
          google.maps.event.addListener(marker, 'click', testTest);            
       

       }
  
 }

function testTest(e){
    alert("Running function...")
    alert("e.latLng = " +e.latLng)
    funShowOverLay(); 
}

Problemet är nog att ett klick på en markör inte genererar någon händelse till closure-funktionen. Kanske går att lösa genom en självreferens, som förhoppningsvis pekar till din Marker. En ren chansning dock :)

var handleMarkerClick = function() {
    var lat = this.getPosition().lat;
    var lng = this.getPosition().lng;
};

google.maps.event.addListener(marker, 'click', handleMarkerClick);