En esta nueva entrega te mostraremos como incrustar Google Maps para tu sitio web o proyecto.
Como incrustar Google Maps en tu sitio web
Antes de comenzar con el código, primero debe conocer la cuota de API. Google ha puesto límites y cuotas en cada solicitud de API para garantizar una distribución equitativa de los recursos del sistema. Lo que significa que tendrá un número limitado de visitantes por día para que se pueda mostrar el mapa con toda la funcionalidad.
Después de eso, el mapa aún se mostrará en su sitio, pero todas las API (javascript, street view) se desactivarán por el resto del día. Si está trabajando en un sitio web de alto tráfico, entonces deberá comprar un plan de Google para tener más cuota y su soporte. De todos modos, la cuota del plan libre es de alrededor de 25,000 mapas de carga, por lo que debería ser suficiente para la mayoría de los sitios pequeños y medianos.
Puede obtener una clave de API en la consola de Google API o hacer clic en el botón “Obtener una clave” en la página de API de Google Map.
Ahora que tiene la clave API, la siguiente es incrustar el mapa de Google en su sitio web.
Primero crea un div que usarás para contener Google Map. El tamaño no importa, ya que Google Map se ajustará a la div. Luego crea una función javascript para inicializar el mapa usando ese div. También puede configurar la posición inicial en la que debería centrarse el mapa, así como el nivel de zoom al pasar JSON parm.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 9
});
}
//This will start the map at latitude -34.397, longitude 150.644, Zoom level 9
Y finalmente, incluya el archivo de script de Google Map y suministre su clave API en la función key = and initMap function in callback=
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer><script>
Te puede interesar: Diseño de Tarjeta de Estilo RPG con efecto de Desplazamiento HTML y CSS