Tengo el código para mostrar y guardar en variables las coordenadas de mi ubicación actual pero al momento de realizar la ejecución del botón este no me muestra el mapa y no encuentro cual sera el problema. He buscado mucho el error y aun no se como arreglarlo
<html>
<head>
<title>Geolocalizacion</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="findMe()">Mostrar Ubicacion</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPKfClfo7suCHpbPsV5irfHS3wEzrjH5Y&callback=initMap"></script>
<script>
function findMe(){
var output = document.getElementById('map');
if(navigator.geolocation){
output.innerHTML = "<p>Soporta geo</p>"
}else{
output.innerHTML = "<p>No soporta</p>"
}
function localizacion(posicion){
var latitude = posicion.coords.latitude;
var longitude = posicion.coords.longitude;
var imgURL = "https://maps.googleapis.com/maps/api/staticmap?center="+latitude+","+longitude+"&size=600x300&markers=color:red%7C"+latitude+","+longitude+"&key=AIzaSyCPKfClfo7suCHpbPsV5irfHS3wEzrjH5Y";
output.innerHTML = " <img src ='"+imgURL+"'>";
}
function error(){
output.innerHTML = "<p>No se pudo obtenet la localizacion</p>";
}
navigator.geolocation.getCurrentPosition(localizacion,error);
}
</script>
</body>