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

Imágen de perfil

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


HTML

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 09 de Mayo del 2013 por Xavi
8.751 visualizaciones desde el 09 de Mayo del 2013. Una media de 49 por semana
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 09 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
8.752 visualizaciones desde el 09 de Mayo del 2013. Una media de 49 por semana
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
poncho garcia
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

http://lwp-l.com/s2371