Buenas,
Una vez visto cómo mostrar un mapa de Google Maps, cómo centrarlo y cómo poner marcas, ahora toca el momento de personalizarlo.
En la versión 3 del API de Google Maps, hay que tener en cuenta que no se permite añadir o eliminar controles de forma dinámica, éstos deben de establecerse en la creación del mapa.
El objeto MapOptions
Este objeto será el encargado de dar la forma inicial a nuestro mapa. Para ver todas sus propiedades, te aconsejo una visita a la API de Google Maps ya que aquí sólo veremos los más interesantes (o al menos desde mi punto de vista).
Obligatorias
- center: propiedad que determina dónde se centrará el mapa al mostrarlo. Es obligatoria y es de tipo LatLng.
- mapTypeId: propiedad de tipo MapTypeId obligatoria y que es cómo se mostrará inicialmente el mapa.
- zoom: entero obligatorio con el zoom aplicado al mapa.
Visuales
- disableDefaultUI: booleano para mostrar o no todos los controles del mapa. Por defecto están habilitados.
- mapTypeControl: booleano para mostrar o no el tipo de mapa. Por defecto habilitado.
- mapTypeControlOptions: propiedad del tipo MapTypeControlOptions para configuración del control del tipo de mapa cuando éste se muestra.
- mapTypeIds: array con los tipos de mapa a mostrar. Ver
MapTypeId. - position: propiedad de tipo ControlPosition para especificar dónde se mostrará el control. Por defecto TOP_RIGHT. Las constantes posibles son:
- BOTTOM
- BOTTOM_LEFT
- BOTTOM_RIGHT
- LEFT
- RIGHT
- TOP
- TOP_LEFT
- TOP_RIGHT
- style: propiedad de tipo MapTypeControlStyle para determinar el estilo del control. Los posibles valores son:
- DEFAULT
- DROPDOWN_MENU
- HORIZONTAL_BAR
- mapTypeIds: array con los tipos de mapa a mostrar. Ver
- navigationControl: booleano para mostrar o no el control de navegación.
- navigationControlOptions: propiedad de tipo NavigationControlOptions con las propiedades del control de navegación.
- position: propiedad de tipo ControlPosition.
- style: propiedad de tipo NavigationControlStyle para especificar el tipo de navegador. Las constantes posibles son:
- ANDROID
- DEFAULT
- SMALL
- ZOOM_PAN
- scaleControl: booleano para mostrar o no el control de escala.
- scaleControlOptions: propiedad de tipo ScaleControlOptions con las opciones del control de escala.
- position: propiedad de tipo ControlPosition.
- ScaleControlStyle: ID del estilo. Sólo puede tener un valor, DEFAULT. Es de tipo ScaleControlStyle.
No visuales
- disableDoubleClickZoom: booleano para des/habilitar el zoom con el clic de ratón.
- draggable: booleano para des/habilitar el poder mover el mapa. Por defecto se puede.
- keyboardShortcuts: booleano para des/habilitar el control del mapa con el teclado. Por defecto habilitado.
- scrollwheel: booleano para des/habilitar el control de la rueda del ratón. Habilitado por defecto.
Aplicando lo visto a Delphi
Una vez vistas las configuraciones posibles del mapa, nos queda ver cómo hacerlo desde Delphi.
Basándonos en los ejemplos anteriores, crearemos una constante (MAPA_CODE) que contendrá el código html y JavaScript necesario. En éste, destacar la creación de una nueva función JavaScript que será llamada desde Delphi y será la encargada de generar el mapa con la configuración que hayamos especificado en el programa. La función es esta:
function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,ShowTM,
PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale) {
switch (TMap) {
case "HYBRID": aTMap = google.maps.MapTypeId.HYBRID; break;
case "ROADMAP": aTMap = google.maps.MapTypeId.ROADMAP; break;
case "SATELLITE": aTMap = google.maps.MapTypeId.SATELLITE; break;
default: aTMap = google.maps.MapTypeId.TERRAIN;
}
switch (PosTM) {
case "BOTTOM": aPosTM = google.maps.ControlPosition.BOTTOM; break;
case "BOTTOM_LEFT": aPosTM = google.maps.ControlPosition.BOTTOM_LEFT; break;
case "BOTTOM_RIGHT": aPosTM = google.maps.ControlPosition.BOTTOM_RIGHT; break;
case "LEFT": aPosTM = google.maps.ControlPosition.LEFT; break;
case "RIGHT": aPosTM = google.maps.ControlPosition.RIGHT; break;
case "TOP": aPosTM = google.maps.ControlPosition.TOP; break;
case "TOP_LEFT": aPosTM = google.maps.ControlPosition.TOP_LEFT; break;
default: aPosTM = google.maps.ControlPosition.TOP_RIGHT;
}
switch (StyleTM) {
case "DROPDOWN_MENU": aStyleTM = google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;
case "HORIZONTAL_BAR": aStyleTM = google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;
default: aStyleTM = google.maps.MapTypeControlStyle.DEFAULT;
}
switch (PosNav) {
case "BOTTOM": aPosNav = google.maps.ControlPosition.BOTTOM; break;
case "BOTTOM_LEFT": aPosNav = google.maps.ControlPosition.BOTTOM_LEFT; break;
case "BOTTOM_RIGHT": aPosNav = google.maps.ControlPosition.BOTTOM_RIGHT; break;
case "LEFT": aPosNav = google.maps.ControlPosition.LEFT; break;
case "RIGHT": aPosNav = google.maps.ControlPosition.RIGHT; break;
case "TOP": aPosNav = google.maps.ControlPosition.TOP; break;
case "TOP_LEFT": aPosNav = google.maps.ControlPosition.TOP_LEFT; break;
default: aPosNav = google.maps.ControlPosition.TOP_RIGHT;
}
switch (StyleNav) {
case "ANDROID": aStyleNav = google.maps.NavigationControlStyle.ANDROID; break;
case "SMALL": aStyleNav = google.maps.NavigationControlStyle.SMALL; break;
case "ZOOM_PAN": aStyleNav = google.maps.NavigationControlStyle.ZOOM_PAN; break;
default: aStyleNav = google.maps.NavigationControlStyle.DEFAULT;
}
switch (PosScale) {
case "BOTTOM": aPosScale = google.maps.ControlPosition.BOTTOM; break;
case "BOTTOM_LEFT": aPosScale = google.maps.ControlPosition.BOTTOM_LEFT; break;
case "BOTTOM_RIGHT": aPosScale = google.maps.ControlPosition.BOTTOM_RIGHT; break;
case "LEFT": aPosScale = google.maps.ControlPosition.LEFT; break;
case "RIGHT": aPosScale = google.maps.ControlPosition.RIGHT; break;
case "TOP": aPosScale = google.maps.ControlPosition.TOP; break;
case "TOP_LEFT": aPosScale = google.maps.ControlPosition.TOP_LEFT; break;
default: aPosScale = google.maps.ControlPosition.TOP_RIGHT;
}
var latlng = new google.maps.LatLng(Lat,Lon);
var myOptions = {
center: latlng,
mapTypeId: aTMap,
zoom: aZoom,
disableDoubleClickZoom: ZClick,
draggable: MoveMap,
keyboardShortcuts: Keyb,
scrollwheel: Wheel,
mapTypeControl: ShowTM,
mapTypeControlOptions: {position: aPosTM, style: aStyleTM},
navigationControl: ShowNav,
navigationControlOptions: {position: aPosNav, style: aStyleNav},
scaleControl: ShowScale,
scaleControlOptions: {position: aPosScale}
};
map = null;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Como podemos ver, la función recibe tantos parámetros como posibles configuraciones tengamos. Lo primero que hace es coger el valor de las constantes necesarias según los parámetros recibidos (los 6 switch). Luego creamos el objeto que contendrá la longitud y latitud y el que contendrá todas las opciones del mapa. Para terminar, liberamos el objeto map por si existía y lo volvemos a crear con las características nuevas.
A nivel de código Delphi, pues queda hacer la llamada cómo ya hemos visto en anterioridad:
const
StrParams = '%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s';
var
Doc2: IHTMLDocument2;
Win2: IHTMLWindow2;
Params: String;
begin
Doc2 := wbWeb.Document as IHTMLDocument2;
Win2 := Doc2.parentWindow;
Params := Format(StrParams, [eLong.Text,
eLat.Text,
QuotedStr(cbTypMap.Text),
IntToStr(tbZoom.Position),
LowerCase(BoolToStr(not chZoomClick.Checked, True)),
LowerCase(BoolToStr(chDrag.Checked, True)),
LowerCase(BoolToStr(chTeclado.Checked, True)),
LowerCase(BoolToStr(chWheel.Checked, True)),
LowerCase(BoolToStr(chShowTypeMap.Checked, True)),
QuotedStr(cbTMPosition.Text),
QuotedStr(cbTMStyle.Text),
LowerCase(BoolToStr(chNavigation.Checked, True)),
QuotedStr(cbNPosition.Text),
QuotedStr(cbNStyle.Text),
LowerCase(BoolToStr(chScale.Checked, True)),
QuotedStr(cbSPosition.Text)
]);
Win2.execScript('DoWeb(' + Params + ')', 'JavaScript');
end;
Aquí os dejo un ejemplo de la pantalla.
También podéis descargaros los fuentes y el binario del programa desde aquí.
Otro día más.
Nos leemos
