VINX Programación Web, Barcelona
669 344 302   vinx@vinx.info

Viernes, 22 de Noviembre de 2013

Posicionar Marcadores en Google Maps

Aprovechando las funciones avanzadas de Google Maps

Incrustar un mapa de Google Maps en una web es algo muy sencillo, sin embargo más complicado puede resultar mostrar varios marcadores personalizados en el mismo mapa; veremos a continuación como conseguirlo.

De entrada necesitaremos utilizar una API de Google la cual nos pedirá una clave, para obtenerla os recomiendo este conciso tutorial del propio Google.

Ahora imaginemos, por poner un ejemplo concreto, que queremos enseñar un mapa de Barcelona con señalados algunos sitios como: la Sagrada Familia, Plaça Catalunya y la Estación de Sants. Para encontrar sus coordenadas podéis utilizar los servicios de esta web: geo-tag.de.

Y este es el código necesario:

<div id="capa-mapa" style="width:400px;height:400px"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=VUESTRA-CLAVE-API&sensor=false"></script>

<script type="text/javascript">
// creamos un array con la información de todos los puntos:
// su nombre, latitud, longitud,
// el icono que le queramos asignar (ver más adelante)
// y un html totalmente personalizable a vuestro gusto, incluyendo imágenes y enlaces
var misPuntos = [
["Sagrada Familia", "41.403571", "2.174472", "icon1", "<div>html</div>"],
["Plaça Catalunya", "41.387097", "2.170072", "icon2", "<div>html</div>"],
["Estación de Sants", "41.379514", "2.140644", "icon3", "<div>html</div>"],
];

function inicializaGoogleMaps() {
// Coordenadas del centro de nuestro recuadro principal
var x =41.389624;
var y = 2.15988563537;

var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(x, y),
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("capa-mapa"), mapOptions);
setGoogleMarkers(map, misPuntos);
}

var markers = Array();
var infowindowActivo = false;
function setGoogleMarkers(map, locations) {
// Definimos los iconos a utilizar con sus medidas
var icon1 = new google.maps.MarkerImage(
"https://www.vinx.info/uploads/editor/map-green.png",
new google.maps.Size(20, 30)
);
var icon2 = new google.maps.MarkerImage(
"https://www.vinx.info/uploads/editor/map-orange.png",
new google.maps.Size(20, 30)
);
var icon3 = new google.maps.MarkerImage(
"https://www.vinx.info/uploads/editor/map-red.png",
new google.maps.Size(20, 30)
);

for(var i=0; i<locations.length; i++) {
var elPunto = locations[i];
var myLatLng = new google.maps.LatLng(elPunto[1], elPunto[2]);

markers[i]=new google.maps.Marker({
position: myLatLng,
map: map,
icon: eval(elPunto[3]),
title: elPunto[0]
});
markers[i].infoWindow=new google.maps.InfoWindow({
content: elPunto[4]
});
google.maps.event.addListener(markers[i], 'click', function(){
if(infowindowActivo)
infowindowActivo.close();
infowindowActivo = this.infoWindow;
infowindowActivo.open(map, this);
});
}
}

inicializaGoogleMaps();
</script>

Ejemplo real del mismo código:

 

« Ver todos los artículos

Comentarios:


Gracias por el post. Me está ayudande en parte... Me gustaría saber cómo relacionar el número de marcadores. Me resulta imposible colocar más de tres marcadores... lo cierto es que no sé mucho de javascript.
¿Podrías ayudarme?

Gracias

Te paso la web para la que quiero hacer el mapa. Se trata d euninvento de mis hermanos.

Escrito por Yolanda, el 15/3/2015 a las 19:43

Muy buen articulo, me ha ayudado mucho. ¡Gracias!

Escrito por Albert, el 14/4/2015 a las 16:33

Buen post de marcadores en Google maps!

Escrito por agencia seo, el 11/11/2015 a las 20:35

Hola gracias por compartir este artículo, tengo un problema, vivo en Colombia, cuando cambio la información de lat,lon no aparecen los marcadores, podrías orientarme.
ejemplo center: var x = 4.6486259
var y = -74.2478946 (Bogotá)
y uso algunos como :
"4.670210", "-74055592"

Gracias de antemano.

Escrito por Oscar Fajardo, el 7/12/2015 a las 23:14

 

Déjanos tu opinión:






Compártelo


¿De qué se habla en esta web?

Usamos cookies propias y de terceros para analizar tus hábitos de navegación. Si continuas navegando consideramos que aceptas su uso. OK | más detalles