La API JavaScript de Google Maps ayuda a crear y personalizar mapas en el contenido de su propia página web. La API proporciona varios tipos de mapas, como mapas satelitales, mapas de carreteras y muchos más, que se pueden personalizar fácilmente de acuerdo con los requisitos de la aplicación del programador cambiando estilos, capas de mapas,
eventos y controles utilizando sus servicios y bibliotecas. Para mostrar un mapa en sus proyectos, se utiliza Google Map API .
Nota: Para modificar o utilizar las funciones mencionadas anteriormente, el usuario debe obtener su propia CLAVE API.
Pasos:
- Cree su propia clave de API siguiendo los pasos en la consola del desarrollador para acceder a todas las API de Google Maps. Guárdelo en algún bloc de notas para futuros propósitos de codificación.
- Referir imágenes: Crear nuevo proyecto para esto.
-
Configure el ID de cliente de OAuth…
Carga de mapa:
<script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap”></script>
Debe incluirse en la sección principal del código, utilice la API_KEY creada anteriormente.
Ejemplo: en el siguiente ejemplo, Javascript se usa para implementar la API de mapas de Google, HTML se usa para el diseño de la página web y PHP se usa para todos los informes de errores y el acceso a las CLAVES API. Como resultado, la latitud y la longitud de la ubicación/lugar actual se muestran en el objeto del mapa con marcadores de flecha.
<?php
// Replace with your own API KEY
define("API_KEY", "YOUR API KEY")
?>
<!DOCTYPE html>
<html>
<!-- Demo Styles -->
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: Helvetica, Arial,
"Lucida Grande", sans-serif;
}
#mapDivId {
margin: 25px 10px;
max-width: 640px;
min-height: 380;
}
#buttonID:disabled {
background: #6c88d2;
}
#buttonID {
background: #33E6FF;
border: #4633FF 2px solid;
border-radius: 2px;
color: #FFF;
cursor: pointer;
display: block;
font-size: 0.8em;
padding: 15px 35px;
}
</style>
<body>
<h2>
How to Get User Location
using Google Map API
</h2>
<div id="buttonDivID">
<button id="buttonID"
onClick="getLocation()">
Click for Location
</button>
</div>
<div id="mapDivId"></div>
<script src=
"https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap"
async defer>
</script>
<script type="text/javascript">
var map;
function initMap() {
/* Access of single map object instance*/
var mapContainer = document
.getElementById("mapDivId");
var coordinates = new
google.maps.LatLng(17.457427, 78.284296);
var defaultOptions = {
center: coordinates,
/* Setting the initial resolution */
zoom: 4
}
map = new google.maps.Map(
mapContainer, defaultOptions);
}// end initMap() function
function getLocation() {
document.getElementById(
"buttonID").disabled = true;
document.getElementById(
"buttonID").innerHTML = "Executing..";
if ("geolocation" in navigator) {
navigator.geolocation
.getCurrentPosition(function (position) {
var currentLatitude
= position.coords.latitude;
var currentLongitude
= position.coords.longitude;
var infoLatLang = "Latitude: "
+ currentLatitude +
"<br>Longitude: " +
currentLongitude;
var infoContent =
new google.maps.InfoWindow
({ map: map, content: infoLatLang });
var currentLocation = {
lat: currentLatitude,
lng: currentLongitude
};
infoContent.setPosition(
currentLocation);
document.getElementById("buttonID")
.style.display = 'none';
});
}
}// end function getLocation()
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA