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

Imágen de perfil
Val: 190
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)
19.328 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.263 visualizaciones desde el 5 de Febrero del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
<!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);
 
        // 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: map.getCenter(),
            map: map,
            title: 'Estatua Cristobal Colon',
            icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png',
            cursor: 'default',
            draggable: true
        });
 
        // añadimos un popup
        var popup = new google.maps.InfoWindow({
            content: 'Estatua Cristobal ColonBarcelona (Spain)',
            position: map.getCenter()
        });
        popup.open(map);
    </script>
</body>
</html>



Comentarios sobre la versión: Versión 1 - una marca y un popup (2)

Imágen de perfil
6 de Febrero del 2014
estrellaestrellaestrellaestrellaestrella
Gracias por el aporte codigo claro y simple gracias...
Responder
Imágen de perfil
23 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
mm si me puedes decir como trazar una ruta te lo agradeceria bastante
Responder

Comentar la versión: Versión 1 - una marca y un popup

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

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
16.067 visualizaciones desde el 9 de Septiembre del 2016
http://lwp-l.com/s2599