Test Google Maps

by Carlos Quintero

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVtvix8ZhA1BRZLHS_DRSJtFsmQ8FQdf0&amp;callback=initMap"></script>
<h4>Presione los botones para Navegar: </h4>
<button onClick="initMap('valencia')">Valencia</button>
<button onClick="initMap('caracas')">Caracas</button>
<div id="map"></div>

<script>
var valencia = [
	{lat:10.1269497, lng: -68.0119184},//Centro del Mapa
  {lat:10.1208272, lng: -68.0179418,txt:"Valencia1"},//MNarcador
  {lat:10.1222879, lng: -68.0151732,txt:"Valencia2"},//MNarcador
  {lat:10.1234636, lng: -68.0192421,txt:"Valencia3"},//MNarcador
  {lat:10.1313598, lng: -68.0157794,txt:"Valencia4"},//MNarcador
];

var caracas = [
	{lat:10.47982, lng: -66.8950194},//Centro del Mapa
	{lat:10.4759915, lng: -66.8943183},//MNarcador
  {lat:10.4757363, lng: -66.8950318},//MNarcador
  {lat:10.4771408, lng: -66.8934184},//MNarcador
  {lat:10.4785874, lng: -66.8981887},//MNarcador
  {lat:10.4764728, lng: -66.8973512},//MNarcador
];

var mapa;

 function initMap(x=null) {
    var y = (x==null) ? valencia : eval(x);

    var map = new google.maps.Map(
        document.getElementById('map'), {zoom: 15, center: y[0]});
     mapa = map;

      for(var i=1; i<y.length;i++){
      var p = {lat: y[i].lat, lng: y[i].lng};
        var marker = new google.maps.Marker({position: p , map: map});
      }  
  }//
 
 //CARGA LOS REGISTROS D
 function cargar(){
  $.get('https://api.myjson.com/bins/ya8qy').done(function(resp){
    console.log(resp);
    initMap(resp)
    console.log(s)
  }).fail(function(err){

  })
 }
  
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVtvix8ZhA1BRZLHS_DRSJtFsmQ8FQdf0&callback=cargar"></script>

CSS

#map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }