All geek questions in one place

Get marker position in (x, y) on Google maps

I use google maps. I want to display a custom info window when a marker is clicked. To do this, the top left end of my custom info window should span the marker.

The problem is that I cannot get the exact (x, y), i.e. the position of the map-div marker on the map. For the first time I can get it using:

var mposition = map.fromLatLngToDivPixel(marker.getLatLng()); pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(mposition.x,mposition.y));

But when I drag the map, the position of the marker in x, y remains the same, and therefore my info window appears in the wrong place. Please help me how can I get the exact position of the marker on the map, even after dragging / zooming.

Thanks.

+4
source share
4 answers
 var overlay = new google.maps.OverlayView(); overlay.draw = function() {}; overlay.setMap(map); var proj = overlay.getProjection(); var pos = marker.getPosition(); var p = proj.fromLatLngToContainerPixel(pos);

Now you can access your pixel coordinates via px and py

Alternatively, you can simply try changing your fromLatLngToDivPixel to LatLngToContainerPixel element. Before panning the map, both functions will return the same values, but after moving or manipulating anything around the map, the DivPixel function will return the updated value relative to the original position, that is: + x / + y pixels. The ContainerPixel function will return the values ​​in the upper left corner of your container div.

+17
source

After some time, to make this work by reading another post and document, etc., here are a few updated codes with everything in the right place:

 var Demo = { overlay:null, map:null, //callback for route request to DirectionsService showDirections: function(dirResult, dirStatus) { //... //set up overlay Demo.overlay = new google.maps.OverlayView(); Demo.overlay.draw = function() {}; Demo.overlay.setMap(Demo.map); //add listener to get xy once map is drawn google.maps.event.addListener(Demo.map, 'idle', function(){ var proj = Demo.overlay.getProjection(); var xy = proj.fromLatLngToContainerPixel(pos); //... }); }, }
0
source

Here is my code without classes:

 var map = null; var ERROR_MESSAGES = { GPS_OFF: "please turn on GPS from your settings.", GPS_TIME_OUT: "maybe you are in a building or something, get into an open area.", GPS_UNKOWN: "Error happened while getting location, please try again later." }; var geolocationManager = new GeolocationManager(); function success(position) { var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = { zoom: 18, center: coords, mapTypeControl: false, disableDefaultUI: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("mapcontainer"), options); var marker = new google.maps.Marker({ position: coords, map: map, icon:'e-pin.png', animation:google.maps.Animation.BOUNCE }); } function findPosition(onSuccess) { geolocationManager.isLocationEnabled(function (isEnabled) { if (!isEnabled) { Util.Alert(ERROR_MESSAGES.GPS_OFF); return; } geolocationManager.find(onSuccess, function (e) { Util.Alert(ERROR_MESSAG`enter code here`ES.GPS_UNKOWN); }); }, function (e) { geolocationManager.find(onSuccess, function (e) { Util.Alert(ERROR_MESSAGES.GPS_UNKOWN); }); }); } function watchPosition () { geolocationManager.watch(); } findPosition(success); function getLocation() { if (!map) findPosition(success); else findPosition(showPosition); /*if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; }*/ } function setCurrentPosition() { findPosition(function (position) { var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.panTo(coords); }); } function showPosition(position) { map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude)); }
0
source

Source: https://habr.com/ru/post/1304887/

More articles:


All Articles