Map Simple

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

CSS

/* 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;
}

JavaScript

var map;
/*
var limist = [];
limist.push({lat: 5.2719444444444, lng: -59.7875});
limist.push();
limist.push();
limist.push();*/





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

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {lat: 5.2719444444444, lng: -59.7875}
    });
    
    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!'
      });
    })
  }