Gmaps Api Not Working In Localhost

im trying to execute the first example of the GMAPS API key https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419 in a example website in localhost, but th

Solution 1:

related question: google maps refreshing grey

from that question:

make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).

Your map doesn't have a size. If I add the following css:

#right { height: 100%; }
  #main {height: 500px; }
  #map { height: 100%; }

the map appears.

code snippet:

var map;

functioninitMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#right {
  height: 100%;
}
#main {
  height: 500px;
}
#map {
  height: 100%;
}

<divid="content"><divid="header"><divid="logo"><h1><ahref="#">MiEmpresa</a></h1><h2><ahref=""id="metamorph">Programación web a medida</a></h2></div><divid="menu"><ul><li><ahref="index.html"title="">Inicio</a></li><li><ahref="presupuesto.html"title="">Presupuesto</a></li><li><ahref="galeria.html"title="">Galería</a></li><li><ahref="localizacion.html"title="">Dónde estamos</a></li><li><ahref="contacto.html"title="">Contacto</a></li></ul></div></div><divid="main_top"><divid="main"><divid="right"><divid="map"></div></div></div></div></div><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Solution 2:

Assuming that you are connected to intenet and the localhost is not offline

Try adding a width to your #map

#map {
        height: 100%;  
        width: 500px;
   }

if work then you should assign a proper width ( eg: width: 100%;) to the map id and to all the parent container