Quiero mostrar un mapa de google usando HTML5 y la API, ya obtengo la ubicación, pero cuando intento ingresar el mapa de Google no me aparece en el div correspondiente. Este es el código de los tres archivos.
Archivo Index
Código HTML :
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>MiMap</title> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body onload="initialize()"> <h1>MiMap</h1> <h2>A simple geolocation</h2> <p>My pos<p> <div id="my_pos"> <p> Starting Location (lat, long):<br /> <span id="startLat">???</span>º, <span id="startLon">???</span>º </p> </div> <!-- The map where we locate the current position--> <div id="map"></div> <!-- Google map API --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- The script for current location --> <script type="text/javascript" src="js/my_pos.js"></script> <script type="text/javascript" src="js/map.js"></script> </body>
my_pos.js
Código :
// Check for geolocation support
if (navigator.geolocation){
console.log('Geolocation is supported!')
}
else{
console.log('Geolocation is not supported for this browser/OS version')
}
// Determine the user's current location
window.onload = function(){
var startPos;
navigator.geolocation.getCurrentPosition(function (position){
startPos = position;
// The position is send to the span tag
document.getElementById("startLat").innerHTML = startPos.coords.latitude;
document.getElementById("startLon").innerHTML = startPos.coords.longitude;
},
// Handle Errors
function(error){
alert("Error ocurred. Error code: " + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
});
}
map.js
Código :
// Position on the map
function initialize(){
// Variables for longitude and latitude
//var latitude = startPos.coords.latitude;
//var longitude = startPos.coords.longitude;
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Put the map in the div
map = new google.maps.Map(document.getElementById("map"), myOptions);
}Creo que el problema puede estar en que hay dos onload en el index, pero ya quité uno y ni aún así se muestra el mapa. Igual, si trato de usar solo el archivo del mapa, no me muestra nada, solo funciona cuando ingreso el código en el archivo index.html, yo quiero que esté el código del mapa a parte porque le voy agregar más cosas, pero no me sale, me gustaría saber por qué
Saludos, y gracias de antemano
