Google Maps API

Question

Google Maps API

Navigation

#1 by (1 votes)

0

I have the following situation:

The geographic 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 (in the example quoted 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 not.

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

asked by anonymous 20.05.2017 / 03:46

1 answer

When entering, value is incorrect Sequelize Migrate - Error: TypeError: defineCall is not a function

score 1 · Accepted Answer

To show only a specific area, knowing its boundaries, use the LatLngBound API, as in the example link

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 center of the map are changed to an arrangement with the defined limits.