Creamos Marcas... Desarrollamos Webs... Hacemos Logotipos... Posicionamos tu Marca... Anunciamos en Google... Hacemos Social Media... Te hacemos descuentos... Creamos Efectos... Retocamos Fotos... Asesoramos Empresas... Facebook para Empresas... Hacemos Concursos... No gastas, Inviertes... Damos Resultados... Tiendas Virtuales... Trabajamos en equipo... Te ayudamos a crecer... Te escuchamos... Tu web en celulares... Ganamos Premios... Hacemos SEO y SEM... Facebook ADS... Te llamamos... Volamos Cometa...
Home   »  Noticias » Programacion » Programar con google maps api

Programar con google maps api

Hace algunos días tuve que realizar un mapa de google para una web (google maps api), nada del otro mundo, pero esta vez tenia los siguientes requerimientos:

  • añadir las ubicaciones de los distintos proyectos que la empresa tiene por todo el Perú.
  • Que al hacer clik sobre cada ubicación del proyecto este mostrara una ventana de información con el titulo del proyecto, descripción del proyecto, foto del proyecto y link a la pagina del proyecto.
  • Que sea fácilmente actualizable,
  • Que esta ventana de información se pudiera cerrar

Asi que me puse a consultar el manual de google maps y este fue el resultado escrito en puro javascript.

DEMO Download

<!DOCTYPE html>
<html>

<head>
    <style>
        body,
        #map {
            margin: 0px;
            padding: 0px;
        }

        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .map-control {
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
            font-family: 'Roboto', 'sans-serif';
            margin: 10px;
            display: none;
        }

        #map .map-control {
            display: block;
        }

        .selector-control {
            font-size: 14px;
            line-height: 30px;
            padding-left: 5px;
            padding-right: 5px;
        }

        #contenedor_globo {
            color: #000;
            background-color: #fff;
            padding: 5px;
            width: 250px;
            height: 150px;
            overflow: hidden;
        }

        #contenedor_globo h3 {
            text-align: center;
            font-size: 16px;
            width: 100%;
        }

        #contenedor_globo .row {
            width: 100%;
            clear: both;
        }

        #contenedor_globo img {
            float: left;
            max-width: 80px;
            margin-right: 10px;
        }

        .button {
            border-top: 1px solid #ff0000;
            background: #751313;
            background: -webkit-gradient(linear, left top, left bottom, from(#c91818), to(#751313));
            background: -webkit-linear-gradient(top, #c91818, #751313);
            background: -moz-linear-gradient(top, #c91818, #751313);
            background: -ms-linear-gradient(top, #c91818, #751313);
            background: -o-linear-gradient(top, #c91818, #751313);
            padding: 8.5px 17px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
            -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
            box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
            text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
            color: white;
            font-size: 12px;
            font-family: Helvetica, Arial, Sans-Serif;
            text-decoration: none;
            vertical-align: middle;
        }

        .button:hover {
            border-top-color: #140101;
            background: #140101;
            color: #ccc;
        }

        .button:active {
            border-top-color: #d40000;
            background: #d40000;
        }

    </style>
</head>

<body>

    <div id="map"></div>



    <script>
        var map;


        // Inicializamos el mapa, solo con esto ya podríamos ver el mapa en nuestro navegador
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -9.204723,
                    lng: -73.5150215
                },
                zoom: 6,
                mapTypeControl: false
            });



            // Creamos un array con las información para nuestras infoWindos
            var locations = [
                ['Proyecto Urb. PRO Titulo', 'comentario Realizamos este proyecto con una profundidad de 1359 m a 1800 mts', 'Ver Proyecto', '', 'http://rogersoto.com', -9.1224361, -77.6057053],
                ['Proyecto TACNA', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium', 'Ver Proyecto', 'jose@gmail.com', 'http://rogersoto.com', -18.0065679, -70.2462741],
                ['Proyecto SULLANA', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium', 'Ver Proyecto', ' ', 'http://www.google.com.pe/', -4.903638, -80.6864323],
                ['Proyecto CARAZ', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium', 'Ver Proyecto', '', 'http://elcomercio.pe/', -9.0484953, -77.8109958]
            ];


            //Imagen para nuestro marcador principal
            var image_logo = {
                url: 'logo-MTL-Geotecnia_map.png', //ruta de la imagen
                size: new google.maps.Size(100, 50), //tamaño de la imagen
                origin: new google.maps.Point(0, 0), //origen de la iamgen
                //el ancla de la imagen, el punto donde esta marcando, en nuestro caso el centro inferior.
                anchor: new google.maps.Point(50, 50)
            };

            //Creamos nuestro marcador principal
            var marcador = new google.maps.Marker({
                position: new google.maps.LatLng(-11.9361899, -77.0795025),
                map: map,
                title: "Google Maps",
                animation: google.maps.Animation.DROP,
                //identificador: numero,
                draggable: false,
                icon: image_logo
            });

            // Imagen para nuestros marcadores secundarios
            var image_estudio = {
                url: 'map_marcador.png', //ruta de la imagen
                size: new google.maps.Size(40, 60), //tamaño de la imagen
                origin: new google.maps.Point(0, 0), //origen de la iamgen
                //el ancla de la imagen, el punto donde esta marcando, en nuestro caso el centro inferior.
                anchor: new google.maps.Point(20, 60)
            };


            //Creamos un bucle que recorre todo el array para inicializar variables y crear nuestros marcadores
            for (i = 0; i < locations.length; i++) {

                //inicializamos variables del elemento del array
                if (locations[i][1] == 'undefined') {
                    description = '';
                } else {
                    description = locations[i][1];
                }
                if (locations[i][2] == 'undefined') {
                    botonName = '';
                } else {
                    botonName = locations[i][2];
                }
                if (locations[i][3] == 'undefined') {
                    email = '';
                } else {
                    email = locations[i][3];
                }
                if (locations[i][4] == 'undefined') {
                    web = '';
                } else {
                    web = locations[i][4];
                }

                //Creamos el marcador con elemento del array
                marker = new google.maps.Marker({
                    icon: image_estudio,
                    position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                    map: map,
                    animation: google.maps.Animation.DROP,
                    draggable: false,
                    title: locations[i][0],
                    desc: description,
                    botonName: botonName,
                    email: email,
                    web: web
                });

                //añadimos http al link
                if (web.substring(0, 7) != "http://") {
                    link = "http://" + web;
                } else {
                    link = web;
                }

                //Llamamos a la funcion que nos crea las ventanas de información para cada marcador
                bindInfoWindow(marker, map, locations[i][0], description, botonName, email, web, link);
            }


            //Esta función crea la ventana de información para cada marcador y 
            //añade unos listener al marcador para abir la ventana de información y otro para cerrarla
            function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
                var infoWindowVisible = (function() {
                    var currentlyVisible = false;
                    return function(visible) {
                        if (visible !== undefined) {
                            currentlyVisible = visible;
                        }
                        return currentlyVisible;
                    };
                }());

                VentanaInfo = new google.maps.InfoWindow();
                google.maps.event.addListener(marker, 'click', function() {
                    if (infoWindowVisible()) {
                        VentanaInfo.close();
                        infoWindowVisible(false);
                    } else {
                        var html = "<div id='contenedor_globo'><h3>" + title + "</h3><div class='row'> <img src='img/img01.jpg'><p>" + desc + "</p><a class='button' href='" + link + "'>" + telephone + "</a></div></div>";
                        VentanaInfo = new google.maps.InfoWindow({
                            content: html
                        });
                        VentanaInfo.open(map, marker);
                        infoWindowVisible(true);
                    }
                });
                google.maps.event.addListener(VentanaInfo, 'closeclick', function() {
                    infoWindowVisible(false);
                });
            }


        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=tu_api_key&callback=initMap" async defer></script>
</body>

</html>
  • 8 enero, 2018
  • admin