how to obtain marker's pixel coordinates

Question

My code puts a marker on the map each time I click on it. The objective is to get each time marker's lat/lon coordinates together with pixel coordinates. So far I've been successful only in getting lat/lon coord. The next step now would be taking these as input and compute the pixel coordinates.

<script>
    function initMap() {41.85, -87.65
    var myLatlng = {lat: 41.85, lng: -87.65};
    var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 18,
                                           center: myLatlng,
                                           disableDefaultUI: false,
                                           mapTypeId: 'satellite',
                                           zoomControl: true,
                                           mapTypeControl: true,
                                           scaleControl: true,
                                           streetViewControl: false,
                                           rotateControl: false,
                                           fullscreenControl: true});

    map.setOptions({draggableCursor:'default'});
    map.addListener('click', function(marker){

    marker = new google.maps.Marker({map: map,
                                     clickable: false,
                                     position: marker.latLng,
                                     })

    var markerposLat = marker.getPosition().lat();
    var markerposLon = marker.getPosition().lng();
    
     function pixl(markerposLat,markerposLon){
       var projection = map.getProjection();
       var bounds = map.getBounds();
       var topRight = projection.fromLatLngToPoint(bounds.getNorthEast());
       var bottomLeft = projection.fromLatLngToPoint(bounds.getSouthWest());
       var scale = Math.pow(2, map.getZoom());
       var worldPoint = projection.fromLatLngToPoint(markerposLat,markerposLon);
       return [Math.floor((worldPoint.x - bottomLeft.x) * scale), Math.floor((worldPoint.y - topRight.y) * scale)]
    };

    localStorage["pixl"] = JSON.stringify(pixl);
    localStorage["markerLat"] = JSON.stringify(markerposLat);
    localStorage["markerLon"] = JSON.stringify(markerposLon);
    console.log(localStorage["pixl"],localStorage["markerLat"], localStorage["markerLon"]);
  });

}
</script>

Function pixl is always undefined. I realize it's a question that have been asked many times. In fact I've tried to adapt many methods. My starting points are this: convert-lat-lon-to-pixels-and-back and of course this: showing pixel and tile coordinates. I can't spot the problem.

Looks to me like you are passing a function pointer into `JSON.stringify` rather than calling the function and passing it's result. — geocodezip, Jul 28 '20 at 16:20

score 1 · Answer 1 · answered Aug 05 '20 at 03:30

Please note that the fromLatLngToPoint method requires a google.maps.LatLng class as its parameter. From the documentation:

fromLatLngToPoint(latLng[, point])

Parameters:
latLng: LatLng
point: Point optional

Return Value: Point optional

Translates from the LatLng cylinder to the Point plane. This interface specifies a function which implements translation from given LatLng values to world coordinates on the map projection. The Maps API calls this method when it needs to plot locations on screen. Projection objects must implement this method, but may return null if the projection cannot calculate the Point.

So in your code, I would do it this way instead:

var worldPoint = projection.fromLatLngToPoint(marker.getPosition());

Another thing I (and @geocodezip) noticed is that you are not passing a parameter to your pixl function. This is why it is intended for you to get an undefined response. You should include a parameter like below instead in order to get the correct value:

localStorage["pixl"] = JSON.stringify(pixl((markerposLat,markerposLon)));

Here is the working fiddle for this.

how to obtain marker's pixel coordinates

1 Answers1