Best IT Recipes

Extend the boundaries of Google Maps so that the Div overlay does not cover any markers

In the Google Maps mashup I'm working on, the map is 100% wide and almost 100% high, and I have a horizontal transparent div that overlays the left side of the map using z-index and CSS.

When I dynamically add my markers, I start with an empty Bounds object and expand it one by one to contain new LatLngs. Sometimes, however, markers appear under my transparent div, which contains other elements.

Say my transparent div is 250 pixels wide.

What I would like to do is when my borders showing all the markers are set, I would like to extend them again to expand the viewing area of ​​Google Maps so that when I fit into the frames these markers now appear at a distance less than 250 pixels from the left border, so they are not covered by a transparent div.

I tried playing with MapProjection.fromPointToLatLng and MapCanvasProjection.fromDivPointToLatLng , but could not achieve the predicted results.

Any tips or examples would be appreciated.

+2
javascript google-maps google-maps-api-3
Jan 26 2018-11-11T00:
source share
1 answer

Hope this quick and dirty solution helps (this is API v3)

 <html> <head> <style> #over { position: absolute; z-index:99999; width: 250px; height: 600px; opacity: 0.7; top: 0px; border: 2px solid black; left: 0px; background: white; } </style> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps Bounds</title> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; var bounds; var overlay; //the witdh of your overlay (probably should get it dynamically var overlayWidth = 250; function initialize() { var chicago = new google.maps.LatLng(41.875696,-87.624207); var myOptions = { zoom: 11, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); overlay = new google.maps.OverlayView(); overlay.draw = function() {}; overlay.setMap(map); } function addMarker() { maywood = new google.maps.LatLng(41.8823,-87.8487); var marker = new google.maps.Marker({ position: maywood, map: map }); bounds = map.getBounds(); point = overlay.getProjection().fromLatLngToContainerPixel(maywood); //point is under overlay if (point.x<overlayWidth) { //calculate offset by which to extend offset = new google.maps.Point((point.x-overlayWidth),0); extendByX = overlay.getProjection().fromContainerPixelToLatLng(offset); //here you might want to check if all your existing markers will fit into new bounds before applying the new bounds newBounds = new google.maps.LatLngBounds(extendByX,bounds.getNorthEast()); map.fitBounds(newBounds); } } </script> </head> <body onload="initialize()"> <div id="over">OVERLAY</div> <div id="map_canvas" style="width: 900px;height: 600px;"></div> <input type="button" value="Add Marker & Expand Bounds" onclick="addMarker()"> </body> </html>
+1
Jan 31 '11 at 12:19
source share


More articles:


All Articles