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.
<!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>