1

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?&callback=initMap">
    </script>
  </body>
</html>

The problem is this:

enter image description here

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.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Ian Hoar
  • 1,174
  • 1
  • 19
  • 40

2 Answers2

3

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);
jeff
  • 8,300
  • 2
  • 31
  • 43
whiteatom
  • 1,456
  • 2
  • 14
  • 33
  • Can you show a complete sample demonstrating how that works? In [this fiddle](https://jsfiddle.net/dandv/pn66Lfcz/) I've added a control and you can see how it obscures one of the markers on the map. Also, why create an empty div the same size as the the OP's overlaid control, instead of just adding that overlaid control to the map? – Dan Dascalescu Nov 05 '16 at 01:59
1

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

tony gil
  • 9,424
  • 6
  • 76
  • 100
  • I didn't end up finishing this project but will definitely reference this in the future. Thanks a lot. – Ian Hoar Mar 07 '12 at 23:34