Código de HTML - Como utilizar un mapa de google maps para posicionar una marca y un popup

Imágen de perfil

Como utilizar un mapa de google maps para posicionar una marca y un popupgráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 09 de Septiembre del 2016 por Xavi (Creado el 05 de Febrero del 2014)
4.012 visualizaciones desde el 05 de Febrero del 2014. Una media de 28 por semana
Código que muestra como implementar la API de Google maps para mostrar un mapa en nuestra web, colocar una marca y poner un popup encima de nuestra marca.

Requerimientos

Versión 1 - una marca y un popup
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 09 de Septiembre del 2016 (Creado el 05 de Febrero del 2014)gráfica de visualizaciones de la versión: Versión 1 - una marca y un popup
2.902 visualizaciones desde el 05 de Febrero del 2014. Una media de 21 por semana

Versión 2 - Mas de una marca y de un popup en un mismo mapa

Publicado el 09 de Septiembre del 2016gráfica de visualizaciones de la versión: Versión 2 - Mas de una marca y de un popup en un mismo mapa
1.111 visualizaciones desde el 09 de Septiembre del 2016. Una media de 91 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

maps-marca-y-popup
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
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
    <title>utilizar un mapa de google maps para posicionar una marca y un popup</title>
    <script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
 
<body>
<div>
    <h1>utilizar un mapa de google maps para posicionar una marca y un popup</h1>
    <div id="map_canvas" style="width:700px;height:500px;"></div>
 
    <script type="text/javascript">
        var latlng = new google.maps.LatLng(41.375822, 2.177770);
        var latlng2 = new google.maps.LatLng(41.362822, 2.167770);
 
        // definimos valor por defecto
        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        // generamos el mapa
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
        // añadimos una marca
        var marker = new google.maps.Marker({
            position: latlng,
            title: 'Estatua Cristobal Colon',
            draggable: true
        });
        // añadimos una segunda marca
        var marker2 = new google.maps.Marker({
            position: latlng2,
            title: 'Castillo de Montjuic',
            draggable: true
        });
 
        marker.setMap(map);
        marker2.setMap(map);
 
        var popup = new google.maps.InfoWindow({
            content: 'Estatua Cristobal Colon Barcelona (Spain)',
            position: latlng
        });
 
        var popup2 = new google.maps.InfoWindow({
            content: 'Castillo de Montjuic',
            position: latlng2
        });
        popup.open(map);
        popup2.open(map);
    </script>
</body>
</html>



Comentarios sobre la versión: Versión 2 - Mas de una marca y de un popup en un mismo mapa (0)


No hay comentarios
 

Comentar la versión: Versión 2 - Mas de una marca y de un popup en un mismo mapa

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

http://lwp-l.com/s2599