Geolocalizacion

karenlorenadg · #1 (**permalink**) 24/06/2015, 10:45

Buenos dias. Estoy tratando de hacer esto https://www.youtube.com/watch?v=3y45G2hEY_Y y por mucho que haga los pasos exactos no me carga el mapa en mi pagina.html alguien podria decirme a que se debe, sera problemas del navegador? lo raro es que inserto un mapa cualquiera embebido y si se muestra. Agradezco me colaboren con esto.

alealvaro · #2 (**permalink**) 24/06/2015, 12:06

Hola!

Sería útil ver el código que tienes hasta ahora para buscar el error.

karenlorenadg · #3 (**permalink**) 24/06/2015, 15:12

Código HTML:

Ver original<!DOCTYPE>
<html>
<head>
<title>Bienvenidos a</title>
</head>
 
<body>
 
<!-- <input type="Submit" onclick="init()" value="Cargar Mapa"> -->
<div id="map" style="width: 100%; heigth: 1024px;">
<script src="http://maps.google.com/maps/api/js?sensor=false&callback=init"></script>
 
<script type="text/javascript">
    
var map;
var marker;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(8.8001153,-75.8506026),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map"),mapOptions);
        var place = new.google.maps.LatLng(8.8001309,-75.8505986,21);
        marker = new google.maps.Marker({
            position: place,
            title: "Estacion 1",
            map: map
        });
    }
 
</script>
 
 
</div>  
 
 
 
</body>
</html>

karenlorenadg · #4 (**permalink**) 24/06/2015, 16:03

LO que yo busco es hacer algo similar a esto http://encicla.gov.co/estaciones/, pero no tengo ni la menor idea de como hacerlo, me pareció que el video que publique se asemeja pero no me carga el mapa. Alguien podria decirme donde encuentro un tutorial de cómo hacerlo?

alealvaro · #5 (**permalink**) 24/06/2015, 19:10

Hola!

Aquí está tu código funcionando:

Código Javascript:

Ver original<!DOCTYPE>
<html>
<head>
<title>Bienvenidos a</title>
</head>
 
<body>
 
<!-- <input type="Submit" onclick="init()" value="Cargar Mapa"> -->
<div id="map" style="width: 100%; height: 1024px;">
<script src="http://maps.google.com/maps/api/js?sensor=false&callback=init"></script>
 
<script type="text/javascript">
    
var map;
var marker;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(8.8001153,-75.8506026),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map"),mapOptions);
        var place = new google.maps.LatLng(8.8001309,-75.8505986,21);
        marker = new google.maps.Marker({
            position: place,
            title: "Estacion 1",
            map: map
        });
    }
 
</script>
</div>
</body>
</html>

Básicamente tenías 2 problemas:

* el estilo del div id="map" es height
* en la línea

Código Javascript:

Ver originalvar place = new google.maps.LatLng(8.8001309,-75.8505986,21);

no va un punto entre new y google

Saludos!!

karenlorenadg · #6 (**permalink**) 24/06/2015, 23:46

Dios te bendiga mi amigo. Excelente. Gracias, muchas gracias

karenlorenadg · #7 (**permalink**) 24/06/2015, 23:54

Tengo una duda mi amigo que no esta en el video, yo tengo que marcar 4 puntos en el mapa asi como hice con la estacion 1 pero intento copiar y pegar esta parte del codigo y no me carga nada, el mapa se me pierde, La pregunta es que debo hacer para marcar cuatro puntos o estaciones en el mapa?

Código Javascript:

Ver originalvar map;
var marker;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(8.8001153,-75.8506026),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map"),mapOptions);
        var place = new google.maps.LatLng(8.8001309,-75.8505986,21);
        marker = new google.maps.Marker({
            position: place,
            title: "Estacion 1",
            map: map
        });
    }

karenlorenadg · #8 (**permalink**) 26/06/2015, 08:16

Ahora intente asi pero tampoco me funciona

Código Javascript:

Ver originalvar map;
var marker;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(8.8001153,-75.8506026),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map"),mapOptions);
        var place = new google.maps.LatLng(8.7719441,-75.8659705,17);
        marker = new google.maps.Marker({
            position: place,
            title: "Estacion 1",
            map: map
 
var place = new google.maps.LatLng(8.8001309,-75.8505986,21);
        marker = new google.maps.Marker({
            position: place,
            title: "Estacion 2",
            map: map
        });
    }

Tampoco me funciona