Buenas:
Quisiera que me puedan ayudar estoy realizando un ubicación donde se encuentra el usuario , para ellos estoy realizando el lenguaje programación ASP.NET en C# y con la APP GOOGLE MAPS para eso para que sepa la dirección donde se encuentran hay un button que al presionar debe salir su longitud y latitud del usuario donde se encuentra y con esos datos de longitud y latitud la imagen del mapa se gráfica el mapa.
Les comento que en mi proyecto local cuando lo ejecuto si funciona correctamente como la imagen :
Pero lo raro que cuando lo subo a un hosting el botón ya no funciona le adjunto la imagen :
El error que he verifcado en consola sale esto :
para eso este es mi código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Geocolización</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
float: left;
height: 100%;
width: 45%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">FINANCIERA QAPAQ</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="Menu.aspx">Inicio</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Gestión<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="GestionDomiciliaria.aspx">Gestionar Domiciliaria</a></li>
</ul>
</li>
<li><a href="Maps.aspx">Ubicación Geografica</a></li>
<%-- <li><a href="#">Page 3</a></li>--%>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> <%= Session["0"].ToString()%></a></li>
<li><a href="Salir.aspx"><span class="glyphicon glyphicon-log-in"></span> Salir</a></li>
</ul>
</div>
</div>
</nav>
<center>
<input type="button" value="Show my location on Map"
onclick="javascript: showlocation()" /> <br/>
</center>
Latitude: <span id="latitude"></span> <br/>
Longitude: <span id="longitude"></span>
<br/><br/>
<div id="map"></div>
<div id="pano"></div>
<script>
function initialize() {
var fenway = { lat: -12.092497600000002, lng: -77.0548962 };
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 17
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
function reloadMap(myLat, myLong) {
var fenway = { lat: myLat, lng: myLong };
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 17
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
var map = null;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
//var latLong = new google.maps.LatLng(lat, lon);
//var marker = new google.maps.Marker({
// position: latLong
//});
console.log("la variable del map es:");
console.log(map);
//marker.setMap(map);
//map.setZoom(8);
//map.setCenter(marker.getPosition());
reloadMap(lat, lon);
}
// google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
</script>
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE&callback=initialize">
</script>
</body>
</html>