Tutorial de Google Maps para principiantes. 2ª Parte
Esta es la segunda y última parte del tutorial de Google Maps para principiantes, en la primera entrega viste como se creaba un mapa sencillo, ahora vamos a trabajar con las opciones mas básicas que nos ofrece la API de GoogleMaps.
1. Cambiando el centro inicial de tu mapa
Para cambiar la posición inicial que se muestra en el mapa cuando se carga hay que cambiar la línea siguiente:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Tienes que cambiar los parámetros de la función GLatLng por la latitud y longitud de tu nuevo centro inicial de mapa, el ultimo número (13) es el zoom inicial del mapa.
¿Y como encuentro las longitudes y latitudes para que GoogleMaps lo entienda?
Muy fácil vamos a la web de GoogleMaps y buscamos el lugar que queramos mostrar por ejemplo este. La latitud y longitud estan en la URL, por ejemplo en este caso es 41.548929,2.42609, justo lo que viene detrás de &ll=
Si queremos que este sea nuestro centro de mapa inicial debemos poner esos datos en la funcion GLatLng de nuestro script.
map.setCenter(new GLatLng(41.548929,2.42609), 13);
Si no nos aparece la URL con los datos ( a veces no sale en ese formato ) puedes probar de pulsar en link que hay arriba en la derecha, justo encima del marco del mapa y que pone “Enlazar con esta página”, seguramente aquí salga la URL completa e indicando los datos de latitud y longitud.
Aquí tienes el ejemplo.
2. Añadir paneles para trabajar con tu mapa
Ahora vas ha añadir unos controles que permiten moverte por el mapa, hacer zoom, una leyenda con la escala del mapa y ademas poder cambiar las vistas entre Satélite, Mapa o Híbrido.
Debes añadir las siguientes líneas al script:
map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl());
GLargeMapControl -> Te pemite hacer zoom y moverte mediante botones por el mapa, además poder volver al centro inicial.
GScaleControl -> Añade una leyenda en la parte inferior izquierda con la escala del mapa.
GMapTyeControl -> Te permite cambiar entre los diferentes modos de ver un mapa.
Puedes ver el resultado aquí.
3. Añadir un icono en un punto del mapa
Ahora vamos a insertar un marcador en el mapa, justo en el centro inicial. Cuando se haga “click” al punto se centrará la vista al punto en cuestión. Además tendrá un globo con información. Se pueden añadir tantos puntos como se quieran y donde quieran. Pero para este caso vamos a añadir solo uno:
var punto = new GLatLng(41.548929,2.42609);
var marcador = new GMarker(punto);
GEvent.addListener(marcador, "click", function() { map.panTo(new GLatLng(41.548929,2.42609));});
map.addOverlay(marcador);
marcador.openInfoWindowHtml("<b>Mi primer PUNTO</b>");Con la función GMarker creamos el marcador en el punto localizado por la variable “punto”.
Con GEvent, creamos un evento al hacer click en “marcador“, lo que se hace al hacer “click”, en este caso, es ir a la posición ( map.panTo) 41.548929,2.42609 y con openInfoWindowHtml se abre una ventanita en forma de globo con información en formato Html.
Puedes ver el resultado aquí
Pues esto es todo, la verdad es que para hacer cosas básicas no se requiere muchos conocimientos, tan solo conocer un poco las funciones y probar cosas, con este manual espero ayudar a quiénes empiezan con esto de los mapas.
Si tenéis dudas o hay algo que no queda claro, enviar un comentario, se agradece.
Si te ha gustado este post y quieres desarrollar tu proyecto en Internet puedes visitarme en http://davidcorto.arpaneting.es/ y si necesitas diseño web o posicionar tu web puedes visitar al diseñador web Pedro Leorri.
Muchas gracias TheDavis por este tutorial. A mi me ha servido, no conseguía introducir el marcador y con tus instrucciones ha sido coser y cantar. Muchas gracias.
De nada Jorge,
¡un saludo!
como se hace para crear una pagina con un mapa que al colocar el marcador quede .Es decir que cuando entra otro usuario vea ese marcador y pueda agregar otro
Hola!!! en verdad muy bueno el tutorial ya que recién estoy iniciandome. Mi pregunta es como hacer para cambiar el marcador(globo) en el mapa por uno realizado por mi, o sea, agregarle una imagen mía como marcador como puede ser el logo de mi empresa.
Gracias.
Hola marcelo, puedes probar con el siguiente código:
icono = new GIcon(G_DEFAULT_ICON, “http://maps.google.com/mapfiles/ms/micons/blue-dot.png”);
icono.iconSize= new GSize(32,32);
var marker = new GMarker(point,icono);
map.addOverlay(marker);
Debes cambiar la URL por tu imagen. Seguramente podrás usar una URL relativa al documento en cuestión.
Hola!! gracias por contestar pero estuve probando el codigo y provoca que no abra google map, que puede ser?
Gracias
Hola de nuevo, marcelo, vaya, pues veamos, antes de nada, el crear un icono para el Google Maps requiere de algo más de codigo, jeje, de pongo un par de enlaces con mucha información:
http://econym.googlepages.com/custom.htm
http://econym.googlepages.com/example_custom.htm [Ejemplo]
Tienes que definir todas las propiedades del elemento GIcon:
var Icon = new GIcon();
Icon.image = “mymarker.png”;
Icon.iconSize = new GSize(20, 34);
Icon.shadow = “myshadow.png”;
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = “mytran.png”;
Icon.printImage = “mymarkerie.gif”;
Icon.mozPrintImage = “mymarkerff.gif”;
Icon.printShadow = “myshadow.gif”;
Y después crear el GMarker especificando tu punto, en el caso seria algo así:
var marker = new GMarker(point,Icon);
Cuidado, el “point” debe ser un GPoint, ya sabes definiendo algo así:
var point = new GLatLng(lat,lng);
Las variables lat y lng contienen un float con los valores de latitud y longitud.
No sé si te he liado más o te he resuelto el problema, en todo caso, siento no poder ser más claro en estos momentos.
Prometo hacer una entrada sobre esto ;)
Un saludo y gracias por preguntar tus dudas.
Hola!!! te cuento que sigo con problemas jaja, el codigo que ingreso en dreamweaver es el siguiente:
var Icon = new GIcon();
Icon.image = “mymarker.png”;
Icon.iconSize = new GSize(20, 34);
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = “mytran.png”;
Icon.printImage = “mymarkerie.gif”;
Icon.mozPrintImage = “mymarkerff.gif”;
Icon.printShadow = “myshadow.gif”;
var marker = new GMarker(point,Icon);
var point = new GLatLng(lat,lng);
por el cual me dice que tengo un error de sintaxis en la linea, Icon.image = “mymarker.png”;
este es mi codigo:
Google Maps JavaScript API Example
//