Código para agregar mapas de Google Maps

De WikiSalud
Saltar a: navegación, buscar

Contenido

Introducción


Actualmente la versión oficial de Google Maps Javascript API (Application Programmable Interface) es la 3. Esta versión no necesita que se proporcione ninguna llave de Google para ser utilizada en una aplicación web, a diferencia de las versiones anteriores. Esta versión fue diseñada para trabajar de forma rápida con dispositivos móviles como iPhone, Android, etc.


Si se desea utilizar geocodificación avanzada, soporte técnico y control de la publicidad de google se recomienda utilizar la versión Google Maps API Premier la cual tiene un costo anual de $10,000 y se utiliza mediante un idclient con el que se autorizan los URL que van a hacer uso de los mapas.

Para utilizar los mapas de google de El Salvador en una aplicación web, únicamente se incluyen en el código dos script de javascript:


1- El primer script carga el API de Javascript Google Maps. Se debe de especificar el parámetro sensor a true o false. El parámetro sensor con un valor de true se utiliza especialmente cuando se ocupan localizadores móviles. Además, se pueden cargar bibliotecas adicionales utilizando el parámetro libraries.


2- El segundo script inicializa el mapa mediante la especificación de las coordenadas del centro del mapa, el tamaño del zoom y el tipo de mapa (Satélite, híbrido, calles, físico o terreno). En el caso de El Salvador, las coordenadas para el centro son: 13.68793, -88.71914 (latitud y longitud respectivamente). Finalmente, se crea una instancia de la clase Map a la cual se le indica como parámetro el objeto DOM que contendrá al mapa y que está en una etiqueta div de la etiqueta body.

Mapa de Google en pantalla completa de aplicación web


A continuación se muestra el código fuente Javascript básico para agregar los mapas de Google en la pantalla completa:

<!DOCTYPE html>
 
<html>
 
<head>
 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
<style type="text/css">
 
html { height: 100% }
 
body { height: 100%; margin: 0px; padding: 0px }
 
#map_canvas { height: 100% }
 
</style>
<script type="text/javascript"
 
src="https://maps.google.com/maps/api/js?sensor=false">
 
</script>
 
 
<script type="text/javascript">
 
function initialize() {
 
var latlng = new google.maps.LatLng(13.68793, -88.71914);
 
var myOptions = {
 
zoom: 9,
 
center: latlng,
 
mapTypeId: google.maps.MapTypeId.HYBRID
 
};
 
var map = new google.maps.Map(document.getElementById("map_canvas"),
 
myOptions);
 
}
 
 
</script>
</head>
 
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
 
</body>
 
</html>

Al cargar el código fuente el resultado deberá ser el siguiente:

GoogleAPI.jpeg


Mapa de Google en un frame de una aplicación web

Si se desea agregar un mapa de google en un frame o parte de la aplicación web, se agrega el primer script únicamente. En este caso ya no es necesario llamar dentro de la etiqueta body al segundo script. Además, se tiene que especificar al momento de crear las instancias de mapas Google los siguientes valores en el parámetro "type":

 var GoogleMap = new OpenLayers.Layer.Google(            
            "GoogleMap",
            {format:"image/gif", displayOutsideMaxExtent: true}
        );
 
        var GooglePhysical = new OpenLayers.Layer.Google(
                "GooglePhysical",
                {type: google.maps.MapTypeId.TERRAIN, format: "image/gif"}
            );
 
        var GoogleSatellite = new OpenLayers.Layer.Google(
	            "GoogleSatellite", 
	             {type: google.maps.MapTypeId.SATELLITE,format:"image/gif", numZoomLevels:28, displayOutsideMaxExtent: true} //type indica al API de Google qué capa queremos cargar
	         );    
 
        var GoogleHybrid = new OpenLayers.Layer.Google(
            "GoogleHybrid",
            {type: google.maps.MapTypeId.HYBRID, format:"image/gif", numZoomLevels:28, displayOutsideMaxExtent: true}
        );

Finalmente, se debe de centrar el mapa en la zona geográfica deseada, especificando el centro en latitud y longitud y realizando una transformación de coordenadas:

 
map.setCenter(new OpenLayers.LonLat(-88.7191, 13.68793).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")), 5);


A continuación se muestra la vista de un mapa Google en una aplicación web elaborada con framework Mapfish:


GoogleAPI2.jpeg

Superposición de una capa WMS sobre una capa de Google Maps

Creación de nueva llave API de Google Maps

Para crear una nueva llave API de Google Maps, se debe de disponer de una cuenta de Google. A continuación, se debe de ingresar a: https://code.google.com/apis/console/ y crear un nuevo proyecto. Finalmente, se debe de especificar en la opción Services el servicio de Google que se desea utilizar, en este caso se cambiaría el estado de "Google Maps API v2" a ON. La nueva llave está disponible en la opción API Access de la siguiente manera:

GoogleAPIkey.jpeg

La nueva llave se debe de sustituir por la anterior, como lo indica el código a continuación:

 <script type=\"text/javascript\" src=\"http://www.google.com/jsapi?key=AIzaSyA6eYOKSKzQll6YkfHwIDMLI4jhEl5EkCo\"></script>
 <script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=AIzaSyA6eYOKSKzQll6YkfHwIDMLI4jhEl5EkCo\" type=\"text/javascript\"></script>

Adaptación del código sin especificar llave API de Google Maps

Las capas de Google Maps utilizan la proyección de Mercator que parte de un modelo esférico de la tierra. Si deseamos superponer capas WMS (Web Map Service), que se tienen en otra proyección, sobre las de Google Maps, es necesario hacer algunos ajustes en el código fuente al momento de crear la instancia del mapa. A partir de la versión 3 del API de Google Maps es necesario especificar como proyección base la Mercator, cuyo código en el caso del servidor de mapas Mapserver es: EPSG:3857 o EPSG:900913. En el caso del servidor de mapas Mapserver, los parámetros para cada proyección, están indicados en un archivo epsg, el cual está ubicado en la ruta: /usr/share/proj/. Es necesario verificar que los parámetros de la proyección Mercator estén incluidos en el archivo epsg, de lo contrario se tiene que agregar la siguiente línea:

<3857> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs <>

Donde:

proj = nombre de la proyección
a = semieje mayor del elipsoide
b = semieje menor del elipsoide
lat_ts = latitud de la escala real
lon_0 = meridiano central
x_0 = falso este
y_0 = falso norte
k = factor de escala
units = unidades
nadgrids = indica el uso del archivo con formato NTv2 para transformación de datum
wktext = indica que hay que preservar la cadena exacta de proj.4 para asegurar que se ha tomado en cuenta el parámetro nadgrids.
no_defs = indica que no se use el archivo /usr/share/proj/proj_def.dat

El código de la proyección Mercator se tiene que especificar tanto en el código fuente javascript donde se crean los mapas, como en el archivo .map con información de las capas.

Por ejemplo, si se está usando la librería de javascript OpenLayers, y se desea superponer una capa WMS cuya proyección es WGS84 con código 4326, se tiene que realizar los siguientes cambios en el código fuente:

//Cambio en el objeto options con la v3 del API de Google Maps
var options = {
	  projection: new OpenLayers.Projection("EPSG:3857"), units: "m", 
	  displayProjection: new OpenLayers.Projection("EPSG:4326") ,   
	  maxResolution: "auto", 
	  numZoomLevels: 22,          
	  maxExtent: new OpenLayers.Bounds(-10215655.95483,1452303.53722,-9563800.97771,1706074.47109)
          };
//Esta porción de código se mantiene con respecto a la v2 del API de Google Maps
map = new OpenLayers.Map('mapContainer',options);
 
var mapcomponent = new mapfish.widgets.MapComponent({map: map});
 
var GoogleHybrid = new OpenLayers.Layer.Google(
            "GoogleHybrid",
            {type: google.maps.MapTypeId.HYBRID, format:"image/gif", isBaseLayer:true, numZoomLevels:28, displayOutsideMaxExtent: true}
        );
 
map.addLayers([GoogleHybrid]);
 
var infecos= new OpenLayers.Layer.WMS("infecos",
             "http://nombreservidor/cgi-bin/mapserv?MAP=/var/www/geominsal/pages/client/minsal.map", 
             {layers:'infecos', transparent: "true",format:"image/gif"});
 
map.addLayers([infecos]);
 
map.setCenter(new OpenLayers.LonLat(-88.71914,13.68793).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 9);

Donde,

projection: la proyección base que se va a utilizar para todas las capas
units: unidades del mapa
displayProjection: la proyección utilizada por diversos controles para mostrar los datos
MaxResolution: se especifica si se está mostrando una porción geográfica
numZoomLevels: niveles de zoom para el mapa
maxExtent: indica los límites del recuadro de la zona que se desea mostrar.

Finalmente, se debe especificar la proyección Mercator en la etiqueta metadata del archivo con extensión .map

map
  web
    metadata
      wms_srs "EPSG:4326 EPSG:3857"
    end
  end 
 
 
LAYER
    NAME 'infecos'
    TYPE POINT
    DUMP TRUE
    EXTENT -90.191281 12.706798 -87.623150 14.902626
    CONNECTIONTYPE postgis
    CONNECTION "dbname='geominsal' host=localhost port=5432 user='admin' password='*****' sslmode=disable"
    DATA 'the_geom FROM "ucsf_final" using unique gid using SRID=4326' 
    HEADER   "templates/header.html"
    TEMPLATE "templates/content.html"
    FOOTER "templates/footer.html"
    METADATA
      'ows_title' 'ucsf_final'
      "wms_srs"   "epsg:4326"
      'ows_geometries' 'the_geom'
      'wms_enable_request' '*'
      'wms_include_items' 'all'
      'ows_mygeom_type'  'point'
      "wms_feature_info_mime_type" "text/html"
       'queryable'          'true' 
     "wms_enable_request" "GetMap GetFeatureInfo"
 
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
         "init=epsg:4326"
      END
      CLASS 
       STYLE 
        SYMBOL 'ecosf' 
         SIZE 10 
        COLOR 255 0 0
        END
     END 
END 
END

Los cambios en los códigos anteriores van a permitir que la capa WMS herede la proyección base del mapa que en este caso es la Mercator.

A continuación se muestra una captura de pantalla del resultado de agregar una capa WMS sobre la capa de Google Maps:

GoogleAPI3 WMS.jpeg

Fuente: https://developers.google.com/maps/ http://docs.openlayers.org/library/spherical_mercator.html http://trac.osgeo.org/proj/wiki/ http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#

Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas