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

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

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


HTML

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 9 de Septiembre del 2016 por Xavi (Publicado el 5 de Febrero del 2014)
18.732 visualizaciones desde el 5 de Febrero del 2014
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 9 de Septiembre del 2016 (Publicado el 5 de Febrero del 2014)gráfica de visualizaciones de la versión: Versión 1 - una marca y un popup
3.257 visualizaciones desde el 5 de Febrero del 2014

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

Publicado el 9 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
15.477 visualizaciones desde el 9 de Septiembre del 2016
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2599