Cómo agregar una superposición de imágenes con V3 Maps API

Se puede crear un mapa personalizado de Google con una superposición de imágenes utilizando Google Maps API versión 3 . Por ejemplo , puede superponer un mapa de contornos USGS sobre un mapa de Google existente para generar un mapa de los senderos senderismo detallada para sus visitantes . Utilice los mapas " OverlayView " class Google para añadir superposiciones de imágenes a su mapa. Instrucciones
1

Abra el archivo HTML y busque la sección que contiene el código de Google Maps.
2

Crear una variable global llamada "superposición" , escriba lo siguiente en su el código de seguridad cuando se inicializa el mapa:

var superposición ;
3

Localizar función " initialize " de su mapa y añadir una variable que contiene la ruta del archivo de imagen de superposición :

ImageSource var = ' graphics /map_hiking.jpg ' ;
4

Defina la variable global superposición. Por ejemplo , escriba: .

Overlay = new HikingOverlay ( límites, srcImage , mapa) ;

La variable superposición llama a una función " HikingOverlay " , que contiene los parámetros para la superposición de imágenes
5

Crear la función para la superposición de imágenes . En este ejemplo, la función se llama " HikingOverlay ":

HikingOverlay función ( límites, srcImage , mapa)
6

inicializar los límites, Fuente de la imagen y las propiedades del mapa para el Senderismo función de superposición.
7

Crear una subclase de la función HikingOverlay . Utilice una subclase para no sobrescribir los atributos de la clase padre . Por ejemplo , escriba:

HikingOverlay.sub google.maps.OverlayView = new ();
8

Coloque la superposición de los paneles de la ventana de Google Maps. Usted puede utilizar elementos " div " HTML para posicionar con precisión la superposición o simplemente adjuntarlo a un panel si la superposición cubre todo el mapa. Por ejemplo , crear la división y coloque el mapa al panel escribiendo:

HikingOverlay.sub.onAdd = function ( ) { var

división = document.createElement ( ' DIV ');

var img = document.create.Element ( "img "); div.appendChild ( img ) ;

sub_div = div ;

paneles var = this.getpanes (); panes.overlayLayer.appendChild ( div ) ;

}
9

Coloque la plantilla sobre el mapa utilizando el método de " empate " . Por ejemplo , escriba:

HikingOverlay.sub.draw = function function () { var = overlayProjection this.getProjection () ;}
10

Convertir la proyección de la imagen desde la latitud y longitud coordenadas de píxeles para la colocación en el div . Por ejemplo , escriba:

var NOROESTE = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ());
11

Especifique las dimensiones del estilo del div para ajustar la imagen . Por ejemplo , escriba:

var div = this.div_ ; div.style.left = northWest.x + " px " ;
12

Guarde el archivo y pruébelo . Google muestra su imagen sobre el mapa de Google. Si la imagen no está colocado correctamente , especifique las coordenadas de posicionamiento adicionales al código para colocar con precisión la imagen .