Set initial center and zoom in google maps API

问题

If we open google map directly, the initial view is the our city, the city is zoomed and fitted in the whole screen.

If we create a map web app based on google maps API (without setting the center and zoom parameters), the initial view is blank.

The question is: how to make the map web app behave the same as google map (eg. display initial map view as the user's city being fitted in the whole screen)?

Looking forward to the answer, and expect as less code as possible.

For Bing Maps API, the city is fitted in view without setting the center and zoom of the map.

回答1:

You mentioned that you want the map to be initially set on the user's city. Based on this use case, it is necessary for us to know first which city is our users at. One way to detect that is by using HTML5's Geolocation API.

I understand that you find the pop up asking for a permission to be annoying, but note that as stated in Geolocation API's doc (Item 4.1)

User agents must not send location information to Web sites without the express permission of the user.

This is why the pop ups asking for permissions are required.

Assuming that you are fine with it (you can always opt to use other user location detection strategy if you wish), then, after getting your target user's location (in the form of geographical coordinates), you can use Geocoding API to reverse geocode it. This will give us a list of addresses that were matched against these coordinates.

From this list of addresses, you could select the address which correspond to its city. Note that for this part, you may need to use different sets of components to align with the address formats used in different regions.

As per this doc, places with a type locality indicates an incorporated city or town political entity.

However, on some cases like in UK and in Sweden, the component to display the city is postal_town. Brooklyn is another special case as it uses sublocality_level_1 to represent the city. I'm taking these special cases into consideration for my code sample below.

After selecting the city address, you could get its location and viewport and use that in the map that you will instantiate.

But please feel free to modify the code sample below based on your use case:

function initmap() {
// Get location first using HTML5 Geolocation API
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(geocodePosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function geocodePosition(position) {
  var latlng = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  // GB is the country code for United Kingdom of Great Britain and Northern Island
  // SE is for Sweden
  var specialCaseCountries = ['GB', 'SE'];
  var specialCaseState = ['Brooklyn'];
  var geocoder = new google.maps.Geocoder();
  var map;

  // reverse geocode the geographical coordinates from the Geolocation API
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    // variable for the selected address that corresponds as the city
    var city;
    if (status === 'OK') {
      results.map(function(k, i) {
        results[i].address_components.map(function(a, b) {
          // checking if the result is included on the specialCaseCountries
          if (specialCaseCountries.includes(a.short_name)) {
            if (results[i].types.includes('postal_town')) {
              console.log('formatted address: ', results[i].formatted_address);
              city = results[i];
            }
            // checking if the result is included on the specialCaseState
          } else if (specialCaseState.includes(a.short_name)) {
            if (results[i].types.includes('sublocality_level_1')) {
              console.log('formatted address: ', results[i].formatted_address);
              city = results[i];
            }
            // other addresses
          } else {
            if (results[i].types.includes('locality')) {
              console.log('formatted address: ', results[i].formatted_address);
              city = results[i];
            }
          }
        });
      });
      // create a map that's centered on the selected adddress' location 
      map = new google.maps.Map(document.getElementById('map'), {
        center: city.geometry.location,
        zoom: 10
      });
      // Set the viewport on the selected adddress' viewport
      map.fitBounds(city.geometry.viewport);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Please find the working sample here

来源：https://stackoverflow.com/questions/58569575/set-initial-center-and-zoom-in-google-maps-api