Hay dos formas de agregar Google Maps dentro de una página HTML:
- Usando la clave API
- Sin usar la clave API
Para aprender el primer caso, puede seguir el artículo , mientras que para aprender el otro, siga este artículo.
Para insertar el mapa de Google dentro de la página HTML, siga los pasos:
- Vaya a Google Maps y busque la ubicación deseada.
- Ahora, verá la opción de compartir, haga clic en ella.
- Ahora, aparecerá un cuadro de diálogo para ir a incrustar una opción de mapa.
- Se verá una nueva opción dentro del cuadro de diálogo para copiar html . Y también puede seleccionar el tamaño del mapa que desea incrustar dentro de su página.
- Ahora péguelo dentro de su página html.
Ejemplo: cómo agregar Google Map dentro de la página HTML sin usar la clave API.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Customize the scroll-bar</title>
<style media="screen">
body {
background-image: linear-gradient(
to right, dodgerblue, darkblue);
}
</style>
</head>
<body>
<center>
<h1 style="color:lawngreen;">
Geeks For Geeks
</h1>
<div>
<!-- Google Map Copied Code -->
<iframe src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.2233913121413!2d77.4051603706222!3d28.50292593193056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks!5e0!3m2!1sen!2sin!4v1585040658255!5m2!1sen!2sin"
width="400"
height="300"
frameborder="0"
style="border:0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0">
</iframe>
</div>
</center>
</body>
</html>
Producción:
Nota: el problema de esta técnica es que no utiliza API, por lo que el mapa no se actualiza automáticamente, por lo que cada vez que se actualiza manualmente el mapa se cambia el código HTML del mapa.
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA