Insertar Mapa de Google Maps en Pagina web
Básico código de mapa
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
width: 800px;
border-radius: 15px;
margin: 100px auto;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
}
</style>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 6.249216, lng: -75.588066 },
zoom: 8,
});
}
</script>
</body>
</html>
Con marcador pin de la ubicación
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
width: 800px;
border-radius: 15px;
margin: 100px auto;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
}
</style>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of marker
const coords = { lat: 6.249216, lng: -75.588066 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: coords,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: coords,
map: map,
});
}
</script>
</body>
</html>
