Conviértase en un Creativo con la API de Mapas de Google

() translation by (you can also view the original English article)

Usted ha diseñado un sitio web brillante, ha seleccionado cuidadosamente los colores, la tipografía y las fotos para que reflejen, perfectamente, la marca de la compañía. Entonces su cliente le pide añadir un mapa. Claro, usted podría usar un asistente para la elaboración de un mapa, tal como ese que viene con cada cuenta de google. Pero, enfrentemoslo, su funcionalidad está limitada y, además, lucen bastante genéricos.

La API Google Maps, por otro lado, le da libertad para crear mapas completamente personalizados, que puede hacer todo tipo de cosas estupendas. Portsmouth History map es un sitio que construí recientemente usando esta API.

Map I created using the Google maps API — Portsmouth History map lo cree usando la API Google Maps.

Esta serie de tutoriales le mostrará como crear mapas personalizados usando la API de Google Maps. Ésto implicará que tenga que ensuciarse las manos con un poco de JavaScript, pero valdrá la pena.

El tutorial cubrirá todo tipo de cosas. Por mencionar algunas: mapas persionalizados con color, menús y marcadores, consiguiendo su propio diseño de mapa, (por ejemplo; un mapa hecho a mano) para recrear por medio de la superposición de un adecuado mapa de google, enlazándolo con la API de Flickr, la optimización de la imagen, el diseño responsible, y la optimización y validación de código. O, en otras palabras, para el momento en que usted haya terminado, no solamente será capaz de crear mapas encantadores, sino que también usted habrá visto muchas cosas relevantes para construir cualquier sitio.

Escenario.

Estos tutoriales usan el escenario de la compañía UK para promover festivales de música. La imagen del "Producto Final" debajo, muestra el tipo de cosas que aspiramos lograr. De un vistazo al demo.

Nota: Solamente el marcado Glashtonbury está 'activo' en este ejemplo.

Antes de comenzar, es probable que pueda descargar los archivos asociados con este tutorial. He incluido un archivo html separado para cada actividad.

Pero…, ¿qué es una API?

Una API o Interfaz de Programación de Aplicaciones, es una forma elegante de decir; un conjunto de comandos (por ejemplo, funciones) de una empresa de difusión (por ejemplo, Facebook, Twitter, YouTube Google). La idea es que usted puede usar estos comandos para crear una versión altamente personalizada de su contenido. Por ejemplo, en el caso de la API de Google Maps, el 'content' es los mapas, aunque en el caso de la API de Flickr, el 'content' es las fotos.

Cuando las personas hablan sobre las 'mash-ups' significa que han usado las APIs de dos o más compañías para combinar contenido, por ejemplo; haciendo que imágenes de Flickr aparezcan en un mapa de Google. Literalmente, hay miles de éstas APIs, eche un vistazo a Programmable Web para más información.

Veremos en la API de Flickr en un tutorial posterior, pero empezaremos con enfocarnos en la API de Mapas de Google. Esta le permitirá hacer todo tipo de cosas, incluyendo personalización de colores, marcadores de mapas, estilos de cajas emergentes, nivel de detalles y nivel de zoom. Sin mencionar, de hecho, que los mapas hace algunas cosas estupendas, tales como: visualizar datos en tiempo real, agrupar marcadores, planear rutas, dibujar superposiciones personalizadas, revelar datos dinamicamente... ¡la lista es interminable!

Comenzando con los Mapas de Google

A riesgo de indicar los obvio, para comenzar; usted necesita una cuenta en Google. Si actualmente no tiene una, diríjase a Google y registrese.

Ya armado con una cuenta Google, ahora usted puede aventurarse en las páginas de mapas de Google API. Agregue está página a los Bookmarks de su navegador, ya que se familiarizará mucho con ella. La principales áreas son:

La Guía de los Desarrolladores: Fragmentos de códigos que muestran cómo usar las funciones de la API para hacer ciertas cosas.
Referencia de la API: El registro de referencia completo de todas las funciones en la API. Use esto como un tipo de 'lista de compras' de lo que usted puede hacer usando la API. (Pero tenga en cuenta que hay bibliotecas adicionales que le permitirán hacer, incluso mucho más. Veremos eso más tarde).

Antes de avance más, también necesita una clave de la API (un larga secuencia de letras y números, únicos para usted). Obtenga la clave de API aquí.

Creando su Primer Mapa

OK, usted ya está listo para empezar a construir.

google-maps-api-activity3 — Descargue los archivos fuentes o verifique la versión en vivo.

Para hacer que el mapa proporcionado funcione, reemplace donde dice 'YOUR_API_KEY_GOES_HERE' [LA_CLAVE_DE_SU_APLI_VA_AQUI] con su propia clave. Su mapa debería parecerse al mapa que se muestra abajo.

El principio básico del código es que éste crea un div (llamado festival-map) dentro del cual JavaScript carga el mapa. He añadido comentarios en el código para explicar como funciona, pero merece la pena resaltar lo principal un poco.

El primer código declara su aplicación como HTML5 usando la declaración Doctype <!DOCTYPE html>.

Luego, la configuración de los estilos para este mapa, los bits entre las etiquetas <style type="text/css"> y </style>. Usted puede adaptar el estilo en el id #festival-map, dependiendo de donde usted quiere poner su mapa. Si usted quiere un mapa a 'pantalla completa', entonces ajuste el ancho y la altura a 100 por ciento y quite los márgenes.

Luego, omita el JavaScript, por el momento, el código entre las etiquetas body y configura un objeto HTML vacío, por ejemplo: un div (festival-map) para almacenar el mapa. Esto actúa como un tipo de 'espacio reservado' en el cual JavaScript carga el mapa.

1	<div id="festival-map"></div>

OK, ahora veamos el JavaScript, el primer código conecta a su clave API de su mapa de Google.

1	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&sensor=true"></script>

Luego, éste lanza el JavaScript que crea el mapa. Recordatorio rápido: Las funciones JavaScript (por ejemplo, loadFestivalMap) son un grupo de comandos que solamente corren cuando son llamados por algún otro código. Esto puede lucir complicado, pero, de hecho, solamente está haciendo algunas cosas

Las opciones de configuración (festivalMapOptions) del mapa (por ejemplo, la latitud y la longitud, los niveles de acercamiento, etc) son configuradas y una variable vacía de JavaScript (festivalMap) es creada, a la cual será asignado el mapa en breve. (Consejo: itouchmap es un sitio práctico para buscar coordenadas de latitudes y longitudes de cualquier ubicación).
Después, la función loadFestivalMap es activada para ejecutarse por esta línea: google.maps.event.addDomListener(window, 'load', loadFestivalMap);
Esta función crea el mapa, lo asigna a la variable JavaScript creada para él (ejemplo, festivalMap). Mientras hace esto, éste aplica las opciones de configuración y carga el mapa dentro del div festival-map creado para guardarlo.
Finalmente, la función loadMapMarkers es activada al ejecutarse está última línea de código de la función loadFestivalMap.

Si esto no tiene sentido, consulte a través de los comentarios dentro de la versión completa del código como nos lo explican mejor.

Imágenes como los Marcadores del Mapa

Por ahora, usted debería tener un mapa funcionando, y con algo de suerte, todavía no ha sido desconcertado por JavaScript. Suponiendo que todo está bien, podemos empezar haciendo que el aspecto del mapa sea más interesante.

Es fácil usar sus propias imágenes como los marcadores del mapa. En una manera similar de cómo usted ajusta las opciones y propiedades del mapa (por ejemplo, center, zoom etc, como lo hicimos anteriormente) también puede alterar las propiedades del los marcadores del mapa. Para usar diferentes imágenes como el marcador del mapa, solamente necesita ajustar la propiedad icon de su marcador de mapa. (Si usted está interesado, la API de mapas de Google - las secciones de marcador enumera todos las propiedades de marcadores de mapas, métodos y eventos que usted puede usar).

Típicamente, los marcadores de mapas son .pngs porque le permiten tener una forma irregular con un fondo transparente.

Además, necesitamos ajustar el área 'clickable' para cada marcador para asegurar el bit .png que es 'clickable' de la 'image' y el bit transparente no lo es. Esto es realmente importante si los marcadores coinciden.

Usted, primero crea el icono de la imagen del mapa (markerIconGlastonbury), y luego crea el icono de la forma del mapa (markerShapeGlastonbury) y finalmente, usted enlaza estos dos a su marcador de mapa (markerGlastonbury).

//Setting the position of the Glastonbury map marker.
var markerPositionGlastonbury = new google.maps.LatLng(51.159803, -2.585585);

//Setting the icon to be used with the Glastonbury map marker.
var markerIconGlastonbury = {
 url: 'icons/icon_glas_uk.png',
 //The size image file.
 size: new google.maps.Size(225, 120),
 //The point on the image to measure the anchor from. 0, 0 is the top left.
 origin: new google.maps.Point(0, 0),
 //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
 anchor: new google.maps.Point(189, 116)
};

//Setting the shape to be used with the Glastonbury map marker.
var markerShapeGlastonbury = {
 coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56],
 type: 'poly'
};

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:102
});

Usted puede descargar el archivo HTML completo desde la parte superior de esta página o echar un vistazo a la versión en vivo. Por el momento, tan sólo he añadido un marcador de mapa... ¡obviamente, añadiré más en breve!

Sugerencia: Para conseguir las coordenadas del icono de la forma del mapa, yo inserte el icono de la imagen en una página web temporal en Dreamweaver, y luego use la Herramienta Polígono Hotspot [punto de acceso] para conseguir las coordenadas y luego copiar estas coordenadas de vuelta en la página principal de mi mapa.

Una Nota Rápida sobre la propiedad Z-index

Los elementos tales como; los marcadores de mapas, pueden tener tanto las coordenadas x, y como las coordenadas z. La z-index es la profundidad. Éste determina cuantos elementos están 'stacked' [apilados] arriba uno de otro y, por lo tanto, como están superpuestos.

Si las coordenadas x y y de un elemento son las mismas, entonces los elementos con la coordenada z más alta se mostrará arriba del elemento con el índice z más bajo. (Z-índice solamente funciona sobre los elementos posicionados, ejemplo la posición relative o absolute).

Hasta ahora el mapa luce bien porque por defecto la API de los mapas de Google da a los elementos que aparezcan más abajo en la pantalla un z-índice más alto para que aparezca arriba del elemento y ligeramente más arriba de la pantalla. Ejemplo, el icono de la Isla de Wight está arriba de Glastonbury y del icono del Festival de Lectura (vea la siguiente foto).

Más tarde en este tutorial, echaremos un vistazo en como puede cambiar el índice-z para manipular cómo son presentados los marcadores de mapas.

Cambiando el Color y el Nivel de Detalles.

Aunque el mapa está empezando a tomar forma, el mapa por defecto en realidad no encaja con el efecto general que quiero lograr. Por fortuna, es muy fácil usa las opciones de estilo de la API para personalizar como luce el mapa.

Además, debería decir en este punto que que solamente he agarrado algunas imágenes de festivales de música para ilustrar éste ejemplo. Esto fue un poco al azar, y mi selección no refleja mi opinión, ya sea por o en contra, de cualquier festival.

Paso 1

Use el asistente de JSON para ejercitar como quiere usted que luzca su mapa. Usted puede cambiar los colores de casi todo, añadir y quitar detalles, ajustar el relleno de color e independientemente la geometría, etc. Vale la pena gastar un poco de tiempo en acostumbrarse a como trabajar éste. (En caso de que se esté preguntando, JSON sólo es una forma de formatear información para que una computadora puede leerla).

Paso 2

Cuando usted está feliz con el estilo que muestra en el asistente de previsualización de JSON, haga clic en el botón Show JSON y copie el código.

Paso 3

Regrese a su documento HTML, añada una variable justamente después de la etiqueta de apertura de JavaScript para guardar esta información, luego pegue el código.

//First, we read in the data describing style.
var style_festival = [
 {
 "featureType": "administrative",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "poi",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "transit",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape",
 "stylers": [
 { "color": "#FFE200" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "visibility": "on" },
 { "color": "#4f92c6" }
 ]
 }
];

Paso 4

Necesita obtener su mapa para tratar la información que acaba de añadir como un estilo de mapa. Use StyledMapType para hacer esto.

1	//Then we use this data to create the styles.
2	var styled_festival = new google.maps.StyledMapType(style_festival, {name: "Festival style"});

Paso 5

Finalmente, necesita asignar su nuevo estilo a su mapa para 'activate' el estilo.

1	festivalMap.mapTypes.set('map_styles_festival', styled_festival);
2	festivalMap.setMapTypeId('map_styles_festival');

Por favor, use el enlace que está al inicio de éste tutorial para descargar una copia del código para el diseño del mapa hasta ahora, o eche un vistazo a la demostración en vivo para esta parte del tutorial. De hecho, he añadido dos estilos. Uno está activado de inmediato, y el otro será activado cuando el mapa es ampliado para dar un nivel más grande de detalles. (Esto se explica más abajo).

Además, no pude resistir añadir un fondo en este punto :) Eche un vistazo al selector CSS body para que vea como lo hice.

Cajas Emergentes y Zoom Dinámico

De acuerdo, ahora es tiempo de hacer que el mapa, de hecho, ¡haga algo! Usted podría usar la opción built-in Infor Window overlay, pero no luce fantástico y no son fáciles de personalizar. Así que, en lugar de eso, vamos a usar una biblioteca Infobox.

Paso 1

Descargue una copia de la biblioteca Infobox. Descomprimalo y guárdelo en una carpeta cerca del mapa. Luego, añada ésta línea de código cerca de la parte superior de su archivo HTML.

1	<script src="infobox/infobox.js" type="text/javascript"></script>

Paso 2

Añada los índices-z para cada marcador de mapa para que los que están más cerca del botón de la pantalla aparezcan arriba del marco que está más arriba. (ejemplo, cuánto más cerca está del botón de la pantalla un marcador, cuánto más alto debería ser su índice-z). Todo será revelado más tarde de porque está haciendo esto. Por ejemplo

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:107
});

Paso 3

Añada el siguiente código después de cada marcador de mapa. Por favor, lea a través de los comentarios dentro del código para ver qué está haciendo.

//Creates the information to go in the pop-up info box.
var boxTextGlastonbury = document.createElement("div");
boxTextGlastonbury.style.cssText = pop_up_info;
boxTextGlastonbury.innerHTML = '<span class="pop_up_box_text"><img src="content/glastonbury.jpg" width="400" height="285" border="0" /></span>';

//Sets up the configuration options of the pop-up info box.
var infoboxOptionsGlastonbury = {
 content: boxTextGlastonbury
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-241, 0)
 ,zIndex: null
 ,boxStyle: {
 background: "url('infobox/pop_up_box_top_arrow.png') no-repeat"
 ,opacity: 1
 ,width: "430px"
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "icons/button_close.png"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
};

//Creates the pop-up infobox for Glastonbury, adding the configuration options set above.
infoboxGlastonbury = new InfoBox(infoboxOptionsGlastonbury);

//Add an 'event listener' to the Glastonbury map marker to listen out for when it is clicked.
google.maps.event.addListener(markerGlastonbury, "click", function (e) {
 //Open the Glastonbury info box.
 infoboxGlastonbury.open(festivalMap, this);
 //Changes the z-index property of the marker to make the marker appear on top of other markers.
 this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
 //Zooms the map.
 setZoomWhenMarkerClicked();
 //Sets the Glastonbury marker to be the center of the map.
 festivalMap.setCenter(markerGlastonbury.getPosition());
});

Paso 4

En el código anterior, usted llamo la función setZoomWhenMarkerClicked. Esto acercará el mapa cuando una persona haga clic sobre un marcador. ¡Pero nada terrible pasará hasta que haya creado la función! Esta es la función que usted necesita crear.

function setZoomWhenMarkerClicked(){
var currentZoom = festivalMap.getZoom();
 if (currentZoom < 7){
 festivalMap.setZoom(7);
 }
}

Paso 5

Mientras el mapa se acerca, las posibilidades son que usted quiera mostrar más detalles sobre su mapa. Esto se logra al añadir un evento listener y usando el método getZoom para verificar continuamente si el zoom ha sido cambiado. Si éste ha sido incrementado (arriba del nivel 6) el método setMapTypeId es usado para ajustar el segundo estilo definido arriba (más detallado).

//Continuously listens out for when the zoom level changes. This includs when the map zooms when a marker is clicked.
google.maps.event.addListener(festivalMap, "zoom_changed", function() {
 var newZoom = festivalMap.getZoom();
 //If the map is zoomed in, the switch to the style that shows the higher level of detail.
 if (newZoom > 6){
 festivalMap.setMapTypeId('map_styles_festival_zoomed');
 }
 //Otherwise the map must be zoomed out, so use the style with the lower level of detail.
 else {
 festivalMap.setMapTypeId('map_styles_festival');
 }

});

Paso 6

De estilo a su infobox usando el CSS para hacerlo más bonito.

//Variable containing the style for the pop-up infobox.

var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";

Paso 7

Cuando un infobox ha sido abierto, el marcador de mapa es traído al frente. Sin embargo, si usted se acerca al infobox y luego aleja el mapa a su posición original, el marcador queda enfrente. Esto puede lucir raro.

En el Paso 1 usted ajusto el índice-z para cada marcador. Usted puede usar este ahora para resolver el problema. Usted necesita crear una función (ejemplo, resetZindexes) que reinicia los índices-z a sus valores originales y luego añade una llamada para esta función (ejemplo, resetZindexes();) para que infobox.js active la función para ejecutarse cuando la ventana infobox es cerrada.

Vaya al enlace en la parte superior de esta página para copiar el código para el sitio, o eche un vistazo a la versión en vivo de cómo debería lucir hasta ahora. Solamente he añadido la ventana emergente para Glastonbury. ¡Siéntase libre de añadir otros por su cuenta!

Personalice los Carteles y la Navegación

Casi terminado con la personalización del aspecto del mapa, pero antes de terminar el día, deberíamos añadir algunos controles de navegación.

Google maps tiene 12 áreas donde usted puede añadir controles de mapas, pancartas, etc. Usted quiere personalizar por completo estas áreas, añadiendo cualquier cosa que quiera a su HTML.

Vamos a añadir una pancarta personalizada y una navegación al lado derecho del mapa.

Paso 1

Para comenzar, primero defina una función para crear el menú. Este código extraerá mejor que...

//Function that creates the control panel area, ie. the map title and the 2 buttons just beneath it.
function createControlPanel (controlPanelDiv){
 controlPanelDiv.style.padding = '0px';
 controlUI = document.createElement('div');
 controlUI.style.border='0px solid white';
 controlUI.style.margin='10px';
 controlUI.style.paddingTop='11px';
 controlUI.style.paddingBottom='5px';
 controlUI.style.paddingLeft='0px';
 controlUI.style.paddingRight='0px';
 controlUI.style.width='245px';
 controlUI.style.height='419px';
 controlPanelDiv.appendChild(controlUI);

 //Map title
 titleBar = document.createElement('div');
 titleBar.style.backgroundColor = '#89CBED';
 titleBar.style.height='255px';
 titleBar.style.width='245px';
 titleBar.style.marginTop='0px';
 titleBar.style.marginBottom='0px';
 titleBar.style.marginLeft='0px';
 titleBar.style.marginRight='0px';
 titleBar.style.paddingTop='6px';
 titleBar.style.paddingBottom='2px';
 titleBar.style.paddingLeft='0px';
 titleBar.style.paddingRight='0px';
 titleBar.style.borderTopLeftRadius='5px';
 titleBar.style.borderTopRightRadius='5px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.cssFloat='left';
 titleBar.innerHTML = '<div align="center"><img src="icons/map_title.png" width="230" height="252" border="0"/></div>';
 controlUI.appendChild(titleBar);

 yellowStripe = document.createElement('div');
 yellowStripe.style.backgroundColor = '#FFFF00';
 yellowStripe.style.height='2px';
 yellowStripe.style.width='245px';
 yellowStripe.style.marginTop='3px';
 yellowStripe.style.marginBottom='3px';
 yellowStripe.style.marginLeft='0px';
 yellowStripe.style.marginRight='0px';
 yellowStripe.style.paddingTop='0px';
 yellowStripe.style.paddingBottom='0px';
 yellowStripe.style.paddingLeft='0px';
 yellowStripe.style.paddingRight='0px';
 yellowStripe.style.cssFloat='left';
 yellowStripe.style.fontFamily='Georgia, serif';
 yellowStripe.style.fontSize='14px';
 controlUI.appendChild(yellowStripe);

 //'Smaller' events button.
 smallEvents = document.createElement('div');
 smallEvents.style.height='108px';
 smallEvents.style.width='129px';
 smallEvents.style.marginTop='0px';
 smallEvents.style.marginBottom='0px';
 smallEvents.style.marginLeft='0px';
 smallEvents.style.marginRight='0px';
 smallEvents.style.paddingTop='0px';
 smallEvents.style.paddingBottom='2px';
 smallEvents.style.paddingLeft='0px';
 smallEvents.style.paddingRight='0px';
 smallEvents.style.cssFloat='left';
 smallEvents.innerHTML = '<div align="center" onClick="handelRequests(\'small_events\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_small_event.png" width="128" height="107" border="0"/></div>';
 controlUI.appendChild(smallEvents);

 //Umbrella button
 brolly = document.createElement('div');
 brolly.style.height='149px';
 brolly.style.width='94px';
 brolly.style.marginTop='0px';
 brolly.style.marginBottom='0px';
 brolly.style.marginLeft='0px';
 brolly.style.marginRight='0px';
 brolly.style.paddingTop='0px';
 brolly.style.paddingBottom='2px';
 brolly.style.paddingLeft='0px';
 brolly.style.paddingRight='0px';
 brolly.style.cssFloat='left';
 brolly.innerHTML = '<div align="center" onClick="handelRequests(\'rainfall\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_brolly.png" width="93" height="148" border="0"/></div>';
 controlUI.appendChild(brolly);

}

Nota rápida sobre los estilos: El código arriba usa la propiedad style de un elemento para definir sus estilos usando JavaScript. Para convertir las propiedades CSS a su notación JavaScript, solamente necesita recordar esas propiedades que no tienen un guión permanezcan igual, mientras las que tienen un guión son convertidas a camelCase, ejemplo; background-image se convierte en backgroundImage. La excepción es la propiedad float, que se convierte en cssFloat.

Paso 2

Luego, cree un div para guardar el menú y añada el menú a éste div al llamar la función que usted creo en el paso 1.

//Create control panel (ie. site title and 2 buttons) which appears on the right-hand side.

var controlPanelDiv = document.createElement('div');

var festivalMapControlPanel = new createControlPanel(controlPanelDiv, festivalMap);

Paso 3

Luego, configura la propiedad controls de su mapa para añadir el menú a la ubicación relevante, en este caso RIGHT_TOP.

1	//Add the control panel and reset button (created previously) to the map.
2	festivalMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlPanelDiv);

Paso 4

Por ahora, usted debería tener algo que luzca como un menú personalizado que muestra en el lado derecho de su mapa. Así que todo lo que queda por hacer es hacer que su menú haga algo...

Durante el curso de los siguientes tutoriales veremos los botones Smaller Events para revelar fotos desde Flickr y el botón umbrella [sombrilla] para mostrar una lluvia boceteada sobre el mapa. (Un cliché, lo sé, pero debemos hacer un poco de lluvia aquí durante los meses de verano!

Así que para conseguir hacer algo funcional en este tutorial, he preparado los pasos anteriores para añadir un botón Reset al área RIGHT_BOTTOM. Esto incluye envolver el código alrededor del botón Reset para llamar la función handelRequest.

//Function that creates the 'Reser map' button.
function createResetButton (resetButtonDiv){
 resetButtonDiv.style.padding = '0px';
 controlUI2 = document.createElement('div');
 controlUI2.style.backgroundColor = '#ffffff';
 controlUI2.style.borderRadius='5px';
 controlUI2.style.margin='10px';
 controlUI2.style.paddingTop='2px';
 controlUI2.style.paddingBottom='2px';
 controlUI2.style.paddingLeft='2px';
 controlUI2.style.paddingRight='5px';
 controlUI2.style.textAlign='center';
 controlUI2.style.width='148px';
 controlUI2.style.height='31px';
 controlUI2.innerHTML = '<div onClick="handelRequests(\'reset\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" ><img src="icons/button_reset.png" width="148" height="31" border="0"/></div>';
 resetButtonDiv.appendChild(controlUI2);
}

Paso 5

La función handelRequest hace algunas cosas, nada más eche un vistazo a los comentarios en el código.

//Function that is called when either the 'smaller events', unbrella or the 'reset map' buttons are clicked.
function handelRequests (buttonPressed) {
if (buttonPressed === "reset"){
 //Resets the zoom, map position and marker z-indexes back to their orignal position. Also closes all infoboxes currently open.
 festivalMap.setZoom(festivalMapZoom);
 festivalMap.setCenter(festivalMapCenter);
 resetZindexes();
 //This is a function I've created that closes any info boxes that are open.
 closeAllInfoboxes();
}
else if (buttonPressed === "small_events"){
 alert("This button will do something useful in a later tutorial!");
}
else if (buttonPressed === "rainfall"){
 alert("This button will do something useful in a later tutorial!");
}
}

Puede conseguir una copia completa del archivo HTML para esta parte del tutorial desde la parte superior de su página o echar un vistazo al ejemplo en tiempo real. Solamente el marcador de mapa Glastonbury está activo en este ejemplo.

¿Qué sigue?

¡Esto es todo por este tutorial! Por fortuna, sabes que ahora tienes algo funcionando que vagamente se parece a la imagen arriba de esta página. Si algo mal se ha hecho, eche un vistazo a través de los archivos disponibles que puede descargar en GitHub. He incluido un código en archivos separados para cada parte de este tutorial, así que usted debería ser capaz de trabajar en lo que salió mal.

El siguiente tutorial que veremos acerca de cómo usar la API de Google Maps para darle vida a sus mapas (ejemplo, mapas dibujados a manos o estilo históricos), haciéndolos ampliables e interactivos.

Créditos de las imágenes

Las fotografías usadas dentro de este tutorial han sido todas publicadas bajo la licencia de Creative Commons.