Google Maps API

Asked

Viewed 219 times

0

I have the following situation:

The geographical location of my country is:

longitude de 73°59’32 (A OESTE)
longitude 34°47’30 (A Leste)
latitude 5°16’20 (Ao Norte)
latitude 33°45’03 (Ao sul)

I’m using the example provided by Google called "Simple Markers".

In the script below (present in the example above), how do I display only the map of Brazil?

<!DOCTYPE html>

Simple markers /* Always set the map height explicitly to define the size of the div * element that contains the map. / #map { height: 100%; } / Optional: Makes the sample page Fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } 

  function initMap() {
    var myLatLng = {lat: -16.461, lng: -130.012};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Computacao Evolucionaria!'
    });
  }
</script>
<script async defer

I’ve tried everything, but I can’t.

My goal is to search only in this area. That is, I want to restrict the map by region. In this case, "Brazil"

api google-maps

1 answer

1


To show only a specific area, knowing its limits, use the Latlngbound API, as in the example https://jsfiddle.net/t30y8vwL/

var map;

function initMap() {
    var myLatLng = {lat: -16.461, lng: -130.012};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: myLatLng
    });
    
    var bounds = new google.maps.LatLngBounds();
    var limits = [];
    
    limits.push({lat: 5.2719444444444, lng: -59.7875}); //Norte
    limits.push({lat:-33.751944444444, lng: -52.452777777778}); //Sul
    limits.push({lat: -6.6783333333333, lng: -33.207222222222}); //lest
    limits.push({lat: -6.4641666666667, lng: -72.009444444444}); //Oeste
    
    limits.forEach(function(l){
    	bounds.extend(l);
    })

    map.fitBounds(bounds);
    
    markers = limits.map(function(l){
    	return new google.maps.Marker({
        position: l,
        map: map,
        title: 'Computacao Evolucionaria!'
      });
    })
  }

In this way the zoom and the center of the map are changed to an arrangement with defined limits.

  • Thank you very much! It worked perfectly.

  • Tranquil. If you need to discover the latitudes and longitudes, that is the limits, you can use this page here: http://mapas.webdias.com.br/ just click on the map to find the latitude and longitude.

Browser other questions tagged api google-maps

You are not signed in. Login or sign up in order to post.