Ensure padding around markers on Google Maps for web [duplicate]
I have a full screen Google map with HTML/CSS toolbars overlaid on the map, and a set of map markers.
Is there a way to ensure there is enough padding between the markers and the edges of the map, so that no markers are obscured by the toolbars?
(Codepen in case the code below doesn't work)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
draggable: true,
streetViewControl: false,
zoomControl: false
});
var marker1 = new google.maps.Marker({
position: {lat: 37, lng: -121},
map: map,
});
var marker2 = new google.maps.Marker({
position: {lat: 39.3, lng: -122},
map: map,
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.position);
bounds.extend(marker2.position);
map.fitBounds(bounds);
}#map {
height: 640px;
width: 360px;
}
#overlays {
position: absolute;
height: 50px;
width: 340px;
background: white;
margin: -80px 10px;
text-align: center;
line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
</head>
<body>
<div id="map"></div>
<div id="overlays">Controls / Order pizza / ETA / etc.</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&c开发者_开发百科allback=initMap">
</script>
</body>
</html>The problem is this:
![Ensure padding around markers on Google Maps for web [duplicate]](https://i.stack.imgur.com/gKQSU.png "Ensure padding around markers on Google Maps for web [duplicate]")
UPDATE I've tried adding a control as documented at Custom controls, but the map isn't exactly aware of it - see this fiddle forked from the Maps custom control example. One of the markers is still obscured by the control.
Way late I know.. but I found this searching for a similar issue, but not under controls. If you are trying to push things out from under an control bar, the best way is to create an empty div the same size as your overlaid control and place it in the same spot using the google commands so that maps is aware of it. For example I have a control bar across the top of my map that is 50px tall and I do this.
var padder = document.createElement('div');
padder.style.height = '52px';
padder.style.width = '100%';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);
PHP to make your map fit into your google maps canvas:
a. create a maxmin frame around your imagine wiht maxLat, minLat, maxLng and minLng from everything that you want to show.
$queryMaxMin = 'SELECT max(Nr_Coordinate_Latitude) AS maxLat, min(Nr_Coordinate_Latitude) AS minLat, max(Nr_Coordinate_Longitude) AS maxLng, min(Nr_Coordinate_Longitude) AS minLng FROM coordinate ';
$resultMaxMin = mysql_query($queryMaxMin);
if (count($resultMaxMin) > 0) {
$rowMaxMin = mysql_fetch_array($resultMaxMin);
include ('distanceGeoPoints.php');
$distance = distanceGeoPoints($rowMaxMin['maxLat'], $rowMaxMin['maxLng'], $rowMaxMin['minLat'], $rowMaxMin['minLng']);
}
b. then take the diagonal (maxLat, minLng) to (minLat, maxLng) and calculate the distance using the geometry.spherical library or any algorithm you like - the earth is NOT spherical girls and boys, different models are better equiped to calculate area/distance in your region of the world (wikipedia has a great article on algorithms)
function distanceGeoPoints ($lat1, $lng1, $lat2, $lng2) {
$earthRadius = 3958.75;
$dLat = deg2rad($lat2-$lat1);
$dLng = deg2rad($lng2-$lng1);
$a = sin($dLat/2) * sin($dLat/2) +
cos(deg2rad($lat1)) * cos(deg2rad($lat2)) *
sin($dLng/2) * sin($dLng/2);
$c = 2 * atan2(sqrt($a), sqrt(1-$a));
$dist = $earthRadius * $c;
// from miles
$meterConversion = 1609;
$geopointDistance = $dist * $meterConversion;
return $geopointDistance;
}
c. depending on your canvas's dimensions, set up a zoom factor array (this is mine):
$zoomFactor[0] = null;
$zoomFactor[1] = null;
$zoomFactor[2] = null;
$zoomFactor[3] = null;
$zoomFactor[4] = null;
$zoomFactor[5] = 2000000;
$zoomFactor[6] = 1000000;
$zoomFactor[7] = 500000;
$zoomFactor[8] = 250000;
$zoomFactor[9] = 120000;
$zoomFactor[10] = 60000;
$zoomFactor[11] = 30000;
$zoomFactor[12] = 15000;
$zoomFactor[13] = 7500;
$zoomFactor[14] = 3500;
$zoomFactor[15] = 2000;
$zoomFactor[16] = 1100;
$zoomFactor[17] = 500;
$zoomFactor[18] = null;
$zoomFactor[19] = null;
$zoomFactor[20] = null;
d. then create a routine that takes the distance you got in step b and check it against array:
// zoom factor establish
$zoomFactorFinal = '';
if (($distance > 500) && ($distance < 2000000)) {
include ('zoomFactor.php');
for ($i=20;$i>0;$i--) {
if (!is_null($zoomFactor[$i])) {
if ($distance < ($zoomFactor[$i])) {
// save until distance is smaller than
$zoomFactorFinal .= '&z='.$i;
$zoomInt = $i;
$i = 0;
//echo 'SUCESSO '.$zoomFactorFinal;
}
}
}
} else {
if ($distance <= 500) {
$zoomFactorFinal .= '&z=16';
$zoomInt = 16;
}
if ($distance >= 2000000) {
$zoomFactorFinal .= '&z=2';
$zoomInt = 2;
}
}
f. finally, append the $zoomFactorFinal to your googlemaps URL if you are embedding or use a variation of setZoom() method on your canvas display
加载中,请稍侯......
精彩评论