All geek questions in one place

Google Maps User Control Positioning

I am trying to figure out how to place my control in the center of the page. but when I use "BOTTOM_CENTER", it centers the left end of the div in the center of the map. I would like to compensate for this so that the center of the div is in the lower center of the map. I am looking for a watch and did not find any information about this.

Does anyone have an idea how to do this or can point me to a resource that will explain this a little better?

Thanks!

Below is a modified version of LatLng / Pixel Coordinate Control

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>LatLng Coordinates Control</title> <style type="text/css"> #map { width: 800px; height: 600px; } #latlng-control { background: #ffc; border: 1px solid #676767; font-family: arial, helvetica, sans-serif; font-size: 0.7em; padding: 2px 4px; position: absolute; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function degToDms(dec) { var deg = Math.floor(Math.abs(dec)); var min = Math.floor((Math.abs(dec)-deg)*60); var sec = (Math.round((((Math.abs(dec) - deg) - (min/60)) * 60 * 60) * 100) / 100 ) ; var len = String(deg).length deg = Array(3 + 1 - len).join('0') + deg; var len = String(min).length min = Array(2 + 1 - len).join('0') + min; var len = String(sec).length sec = Array(5 + 1 - len).join('0') + sec; deg = dec < 0 ? '-' + deg : deg; var dec_min = (min*1.0 + (sec/60.0)); var dms = deg + '&deg ' + dec_min.toFixed(3) + '\''; return dms; } function LatLngControl(map) { this.node_ = this.createHtmlNode_(); map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(this.node_); this.setMap(map); this.set('visible', false); } LatLngControl.prototype = new google.maps.OverlayView(); LatLngControl.prototype.draw = function() {}; LatLngControl.prototype.createHtmlNode_ = function() { var divNode = document.createElement('div'); divNode.id = 'latlng-control'; divNode.index = 100; return divNode; }; LatLngControl.prototype.visible_changed = function() { this.node_.style.display = this.get('visible') ? '' : 'none'; //this.node_.style.floatRight = '100px'; }; LatLngControl.prototype.updatePosition = function(latLng) { var dmsLat = degToDms(latLng.lat().toFixed(4)); var dmsLon = degToDms(latLng.lng().toFixed(4)); this.node_.innerHTML = 'Mouse Position: ' + dmsLat + ', ' + dmsLon; }; function init() { var centerLatLng = new google.maps.LatLng(37.748582,-122.418411); var map = new google.maps.Map(document.getElementById('map'), { 'zoom': 10, 'center': centerLatLng, 'mapTypeId': google.maps.MapTypeId.ROADMAP }); var latLngControl = new LatLngControl(map); google.maps.event.addListener(map, 'mouseover', function(mEvent) { latLngControl.set('visible', true); }); google.maps.event.addListener(map, 'mouseout', function(mEvent) { latLngControl.set('visible', false); }); google.maps.event.addListener(map, 'mousemove', function(mEvent) { latLngControl.updatePosition(mEvent.latLng); }); } google.maps.event.addDomListener(window, 'load', init); </script> </head> <body> <h2>LatLng Coordinate Control</h2> <div id="map"></div> </body> </html>
+4
source share
1 answer

For a while, I thought you might have found a bug in the Google APIs! ... but no, alas, that would be too easy; -)

Your main problem is that when you snap the div for your LatLngControl to the map, its width is 0. So it goes where it should be, and when you put the text in the div, it expands from that point. If you take the card and place it with the mouse, you will notice that LatLngControl will move according to how you planned. So quick fix, make this modification:

  function LatLngControl(map) { this.node_ = this.createHtmlNode_(); var dmsLat = degToDms(map.getCenter().lat().toFixed(4)); var dmsLon = degToDms(map.getCenter().lng().toFixed(4)); this.node_.innerHTML = 'Mouse Position: ' + dmsLat + ', ' + dmsLon; map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(this.node_); this.setMap(map); // this.set('visible', false); <---keep it simple for now }

If you really want the page to load using latlng div invisible, you will need to work a little more - ultimately, the hack I think of is to programmatically pan the map back and forth when you first move the mouse over the map - for example when you shake the TV remote control so that it works fine ... but it’s not good.

Also this

 position: absolute;

in your css is probably redundant. And so it is

 divNode.index = 100;

... I know that you might try to place the latlng div above the Google ad unit so that it does not get obscured. And it can be done, but you have to attach the div to the page directly, and not through the map.

+1
source

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

More articles:


All Articles