Google Maps API 3 - Show All Markers on Screen, but Keep Centerpoint

Stephen S

This is very similar to this question. I would like to ensure that all markers are shown at the current zoom level. However, I would also like to choose the center point beforehand (current location of user). If circles are markers, and the square is my intended centerpoint, in the images below, the linked solution would create the first (left, top) image. I would like the second (right, bottom) image.

What I don't wantWhat I do want

MrUpsidown

You can create a LatLngBounds object and extend it with each of your markers coordinates. Then get your bounds object north east and south west coordinates and check whether theses coordinates are contained within the current map bounds. If not, zoom out and try again.

Most of the below code is to generate random markers within certain bounds. The real interesting parts are where I call bounds.extend(position) and the fitAllBounds function.

var map, bounds;

function initialize() {

  var southWest = new google.maps.LatLng(40, -70);
  var northEast = new google.maps.LatLng(35, -80);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  var center = new google.maps.LatLng(40, -70);

  map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Add center marker
  new google.maps.Marker({
    position: center,
    label: 'C',
    map: map
  });

  // Create the bounds object
  bounds = new google.maps.LatLngBounds();

  // Create random markers
  for (var i = 0; i < 20; i++) {

    // Calculate a random position
    var position = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        map.setZoom(5);
        map.setCenter(marker.position);
      }
    })(marker, i));

    // Extend the bounds with the last marker position
    bounds.extend(position);
  }

  // Fit all bounds once, when the map is ready
  google.maps.event.addListenerOnce(map, 'idle', function() {

    fitAllBounds(bounds);
  });
}

function fitAllBounds(b) {

  // Get north east and south west markers bounds coordinates
  var ne = b.getNorthEast();
  var sw = b.getSouthWest();

	// Get the current map bounds
  var mapBounds = map.getBounds();

  // Check if map bounds contains both north east and south west points
  if (mapBounds.contains(ne) && mapBounds.contains(sw)) {

    // Everything fits
    return;

  } else {

    var mapZoom = map.getZoom();

    if (mapZoom > 0) {

      // Zoom out
      map.setZoom(mapZoom - 1);

      // Try again
      fitAllBounds(b);
    }
  }
}

initialize();
#map-canvas {
  height: 200px;
  width: 200px;
}
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Here it is also on JSFiddle:

JSFiddle demo

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Google Map API V3 - infowindows @ markers on 2 maps

分類Dev

Google maps delete all markers and then create new

分類Dev

Google maps API markers content hide by default

分類Dev

Google Maps API 3 Load Markers from MySQL from current position

分類Dev

Get Markers Addresses in Input fields using Drag-able Google Maps API V3

分類Dev

Map markers not rendering - Google Maps Javascript API v3 In Phonegap

分類Dev

How to hide/show groups of markers by category with Google Maps in Android?

分類Dev

Close all info windows google maps API V3?

分類Dev

How to get all markers in google-maps-react

分類Dev

Google maps clear all markers before placing new one

分類Dev

Setting listeners to groups of markers using Google Maps API

分類Dev

Gmap3 show all the available markers on the map from database?

分類Dev

ReactJS and Google Maps - Displaying Markers

分類Dev

Google Maps API 3-onclick URL

分類Dev

Google Maps API 3-onclick URL

分類Dev

How to manage Markers well using google maps api v2 on android

分類Dev

Placing Circles instead of Markers in google maps

分類Dev

Google Maps: infobox turns up behind markers?

分類Dev

Google Maps fit markers in custom bounds

分類Dev

Show/Hide google maps api does not work fine

分類Dev

Google Maps Embed API show pin with center lat lon

分類Dev

How to apply CSS to Here Maps API Markers

分類Dev

Show tooltip on mouseover event in google maps v3

分類Dev

Google 3D Earth How to find the center point from all the markers and set center view

分類Dev

Get all Google Map v3 markers loaded from GeoJSON

分類Dev

Google Maps API v3 infowindow close event / callback?

分類Dev

Google Maps API v3Firefoxの問題

分類Dev

Google maps api v3 calculate mileage by state

分類Dev

3D Earth globe on google maps API JS

Related 関連記事

  1. 1

    Google Map API V3 - infowindows @ markers on 2 maps

  2. 2

    Google maps delete all markers and then create new

  3. 3

    Google maps API markers content hide by default

  4. 4

    Google Maps API 3 Load Markers from MySQL from current position

  5. 5

    Get Markers Addresses in Input fields using Drag-able Google Maps API V3

  6. 6

    Map markers not rendering - Google Maps Javascript API v3 In Phonegap

  7. 7

    How to hide/show groups of markers by category with Google Maps in Android?

  8. 8

    Close all info windows google maps API V3?

  9. 9

    How to get all markers in google-maps-react

  10. 10

    Google maps clear all markers before placing new one

  11. 11

    Setting listeners to groups of markers using Google Maps API

  12. 12

    Gmap3 show all the available markers on the map from database?

  13. 13

    ReactJS and Google Maps - Displaying Markers

  14. 14

    Google Maps API 3-onclick URL

  15. 15

    Google Maps API 3-onclick URL

  16. 16

    How to manage Markers well using google maps api v2 on android

  17. 17

    Placing Circles instead of Markers in google maps

  18. 18

    Google Maps: infobox turns up behind markers?

  19. 19

    Google Maps fit markers in custom bounds

  20. 20

    Show/Hide google maps api does not work fine

  21. 21

    Google Maps Embed API show pin with center lat lon

  22. 22

    How to apply CSS to Here Maps API Markers

  23. 23

    Show tooltip on mouseover event in google maps v3

  24. 24

    Google 3D Earth How to find the center point from all the markers and set center view

  25. 25

    Get all Google Map v3 markers loaded from GeoJSON

  26. 26

    Google Maps API v3 infowindow close event / callback?

  27. 27

    Google Maps API v3Firefoxの問題

  28. 28

    Google maps api v3 calculate mileage by state

  29. 29

    3D Earth globe on google maps API JS

ホットタグ

アーカイブ