En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el icono que que se desea.
Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia. Hemos elegido ese formato porque permite una transparencia para las imágenes. Es una transparencia avanzada con respecto a la que hemos utilizado otras veces con el formato GIF, porque no hace halos blancos alrededor del dibujo. Este formato va a ser muy necesario sobretodo para hacer la sombra de la marca, que tiene que ser forzosamente medio transparente para que quede bien.
Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programas de edición gráfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacer o retocar las imágenes utilizadas.
El código completo del ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.addControl(new GOverviewMapControl()); ;
map.setMapType(G_NORMAL_MAP);
//map.setMapType(G_SATELLITE_MAP);
//DEFINO EL ICONO
var iconoMarca = new GIcon(G_DEFAULT_ICON);
iconoMarca.image = "/images/bandera-roja.png";
var tamanoIcono = new GSize(17,17);
iconoMarca.iconSize = tamanoIcono;
iconoMarca.shadow = "/images/sombra-bandera2.png";
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;
iconoMarca.iconAnchor = new GPoint(11, 16);
function createMarker(point,nombre,continente,pais) {
//CREO LA MARCA EN EL PUNTO Y CON EL ICONO DESEADO
var marker = new GMarker(point, iconoMarca);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>" + nombre + "<br><a target='_parent' href='/destinos/" + continente + "/" + pais + ".html'>Ir al destino " + nombre + "</a></span>");
});
return marker;
}
var point = new GPoint (-4.0,40);
var nombre = "España";
var continente = "europa";
var pais = "espana";
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);
var point = new GPoint (2,46);
var nombre = "Francia";
var continente = "europa";
var pais = "francia";
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);
var point = new GPoint (-5.0,32);
var nombre = "Marruecos";
var continente = "africa";
var pais = "marruecos";
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);
var point = new GPoint (10.5,51.5);
var nombre = "Alemania";
var continente = "europa";
var pais = "alemania";
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
body{
margin:0px;
}
</style>
</head>
<body>
<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>
Autor: Miguel Angel Alvarez
http://www.desarrolloweb.com/articulos/personalizar-iconos-en-mapas-google.html
Usuarios que han visto este tema también han visto...
- Página atrás y página adelante con javascript
- Nivel de seguridad de un password en JavaScript
- Efecto Terremoto
- Botones de radio en Javascript
- Imagen de la semana con link en Javascript
- Versión imprimible de este documento
- Enviar por e-mail este documento
.gif&contenttype=gif)
