All geek questions in one place

Google Maps Get the coordinates of a click pixel or marker (x, y) inside a marker click listener

I am trying to show fully custom info windows above map markers on a brand by clicking . I successfully completed this answer to get a div to display above a click on a canvas map ... but I cannot replicate it when a marker clicks.

Is it possible to get the pixel position of the markers inside the marker click function and suppress the normal infund to show the desired custom infund?

I tried this:

google.maps.event.addListener(marker, 'click', function(args) { var x=args.pixel.x+$('#map').offset().left; //we clicked here var y=args.pixel.y; info.style.left=x+'px'; info.style.top=y+'px'; info.style.display='block'; });

but in the console I see:

 Uncaught TypeError: Cannot read property 'x' of undefined
+5
source share
4 answers

A marker click event returns MouseClickEvent

The only registered MouseClickEvent property:

latLng LatLng Latitude / longitude that was below the cursor when an event occurred.

To convert this to a pixel position, use the fromLatLngToContainerPixel MapCanvasProjection method:

  google.maps.event.addListener(marker, 'click', function (e) { var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng); info.style.left = point.x + 'px'; info.style.top = point.y + 'px'; info.style.display = 'block'; });

working violin

code snippet:

 var geocoder; var map; var overlay; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ map: map, draggable: true, position: map.getCenter() }); google.maps.event.addListener(map, 'projection_changed', function () { overlay = new google.maps.OverlayView(); overlay.draw = function () {}; overlay.setMap(map); var info = document.getElementById('myinfo'); google.maps.event.addListener(marker, 'click', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(e.latLng); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); google.maps.event.addListener(map, 'center_changed', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); google.maps.event.addListener(marker, 'drag', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); }); } google.maps.event.addDomListener(window, "load", initialize); 
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } div.info { position: absolute; z-index: 999; width: 200px; height: 50px; display: none; background-color: #fff; border: 3px solid #ebebeb; padding: 10px; } 
 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div> <div id="myinfo" class="info"> <p>I am a div on top of a google map ..</p> </div>
+15
source

Here's how you get the pixel location:

 function getPixelLocation(currentLatLng) { var scale = Math.pow(2, map.getZoom()); // The NorthWest corner of the current viewport corresponds // to the upper left corner of the map. // The script translates the coordinates of the map center point // to screen coordinates. Then it subtracts the coordinates of the // coordinates of the map upper left corner to translate the // currentLatLng location into pixel values in the <div> element that hosts the map. var nw = new google.maps.LatLng( map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng() ); // Convert the nw location from geo-coordinates to screen coordinates var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); // Convert the location that was clicked to screen coordinates also var worldCoordinate = map.getProjection().fromLatLngToPoint(currentLatLng); var currentLocation = new google.maps.Point( Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) ); console.log(currentLocation); return currentLocation; }
+1
source

With the help of Radio help, I was able to solve this. Pick it up.

  <div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div> <script> info = document.getElementById('myinfo'); google.maps.event.addListener(marker, 'click', function() { var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); var scale = Math.pow(2, map.getZoom()); var worldPoint = map.getProjection().fromLatLngToPoint(this.getPosition()); var markerCoords = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); var x=markerCoords['x']+$('#map').offset().left; //offset needed if map not fullscreen var y=markerCoords['y']; info.style.left=x+'px'; info.style.top=y+'px'; info.style.display='block'; }); </script>
0
source

Another variant. Use the third-party InfoBox library . It inherits from OverlayView, and you can put your "fully customizable" div into it.

proof of conceptual scripts

 var geocoder; var map; var overlay; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ map: map, draggable: true, position: map.getCenter() }); var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;"; boxText.innerHTML = "I am a div on top of a google map .."; var myOptions = { content: boxText, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size(-75, -10), zIndex: null, boxStyle: { background: "url('tipbox.gif') no-repeat", opacity: 0.75, width: "150px" }, closeBoxMargin: "0px 0px 0px 0px", closeBoxURL: "", infoBoxClearance: new google.maps.Size(0, 0), isHidden: false, pane: "floatPane", enableEventPropagation: false }; var info = new InfoBox(myOptions); info.open(map, marker); google.maps.event.addListener(marker, 'click', function() { // info.setContent('<div id="myinfo" class="info"><p>I am a div on top of a google map ..</p></div>'); info.open(map, marker); }); } google.maps.event.addDomListener(window, "load", initialize); 
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } div.info { position: absolute; z-index: 999; width: 200px; height: 50px; display: none; background-color: #fff; border: 3px solid #ebebeb; padding: 10px; } 
 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div>
0
source

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

More articles:


All Articles