Blog
¿Por qué el mapa de Google Maps no se muestra?
Hace ya un tiempo cuando utilizaba por primera vez la API de Google Maps me había surgido un inconveniente. Al insertar el mapa en un sitio web me encontré con el problema de que no se visualizaba. Después de investigar solucioné el problema y continué con el desarrollo normalmente.
Hoy en día me encuentro con que muchas personas tienen el mismo problema, es por ese motivo que decidí hacer este tutorial sencillo.
¿Por qué el mapa de Google Maps no se muestra y cómo solucionarlo?
Es importante saber que la etiqueta div que se utiliza para mostrar el mapa debe contener un alto (height), sí no se establece el mapa no se mostrará, pero esa no es la única etiqueta que debe contener ese atributo, todas las etiquetas padres lo deben incluir, inclusive la de body y html.
El siguiente código de ejemplo muestra el mapa funcionando correctamente:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
async defer></script>
</body>
</html>
Es importante ver en el código que las etiquetas div (para el mapa), body y html tienen un height establecido en 100% (el cual puede variar), si no se indicara ese atributo el mapa no se mostraría.
Otra cosa interesante para decir es que el mapa puede no ser mostrado por otros motivos, como por ejemplo errores de sintaxis. En esos casos esta solución no tendrá efectos.
Bueno gente, espero que les haya sido útil este tutorial, y como digo siempre, ante cualquier inconveniente no duden en dejar un comentario.