Código de HTML - Posicionar una marca y un popup en google maps

Imágen de perfil
Val: 162
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Posicionar una marca y un popup en google mapsgráfica de visualizaciones


HTML

Publicado el 9 de Mayo del 2013 por Xavi (530 códigos)
11.216 visualizaciones desde el 9 de Mayo del 2013
Código de ejemplo que muestra como mostrar google maps en nuestra página web.
Nos permite indicar una imagen para la marca y un popup con el texto que deseamos en la posición que nosotros indiquemos. Se utiliza la API v3 de google maps.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 9 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
11.217 visualizaciones desde el 9 de Mayo del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
<p>
    Página con toda la documentación: Google Maps Javascript API V3 Reference
    <br/><a href="https://developers.google.com/maps/documentation/javascript/reference?hl=es">https://developers.google.com/maps/documentation/javascript/reference?hl=es</a>
</p>
<p>
    <script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <!-- definimos la anchura del mapa -->
    <div id="map_canvas" style="width: 700px; height: 500px"></div>
 
    <script type="text/javascript">
        // definimos las coordenadas
        var latlng = new google.maps.LatLng(40.689913, -74.045341);
 
        // definimos un array de opciones que se añadiran al mapa
        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // definimos una marca
        var marker = new google.maps.Marker({
            // definimos la poisicion de nuestra marca en el mapa
            position: map.getCenter(),
            map: map,
            // titulo que aparecera cuando pongamos el cursor encima
            title: 'Titulo',
            // aqui encontraras muchos tipos de iconos:
            //http://gmaps-samples.googlecode.com/svn/trunk/markers/
            icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png',
            cursor: 'default',
            draggable: true
        });
        // definimos una viñeta de información
        var popup = new google.maps.InfoWindow({
            content: 'Información para la<br/>viñeta. Permite \
                poner algo de<br/>código <strong>html</strong>',
            position: map.getCenter()
        });
        popup.open(map);
    </script>
</p>
</body>



Comentarios sobre la versión: Versión 1 (2)

Imágen de perfil
19 de Noviembre del 2013
estrellaestrellaestrellaestrellaestrella
Gracias por compartir,e lo que andava buscando para una pagina que deje inconcluza, gracias a ti la voy a retomar y espero tener suerte.

si tengo dudas puedo recurir.....
Responder
Alvaro
25 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
mil gracias, un saludo
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2371