Você pode criar um personalizado Google Map com uma superposição de imagem usando o Google Maps API Version 3. Por exemplo, você pode sobrepor um mapa de contorno USGS sobre um mapa existente do Google para gerar um mapa de pista de caminhada detalhado para visitantes do seu site . Use o Google Maps classe " OverlayView " para adicionar superposições de imagens para o seu mapa. Instruções
1

Abra o arquivo HTML e localize a seção que contém o código do Google Maps.
2

Crie uma variável global chamada "overlay " , digitando o seguinte em seu código acima onde você inicializar seu mapa:

var sobreposição ;
3

Localize a função do seu mapa " inicializar" e adicionar uma variável que contém o caminho para o arquivo de imagem de sobreposição :

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

Definir a variável global de sobreposição. Por exemplo, digite :

sobreposição = new HikingOverlay ( limites, srcImage , mapa) ;

A variável sobreposição chama uma função " HikingOverlay " , que contém os parâmetros para a sobreposição de imagem < . br>
5

Criar a função para a imagem sobreposta . Neste exemplo, a função é chamada " HikingOverlay " :

função HikingOverlay ( limites, srcImage , mapa)
6

Inicializar os barrancos, fonte de imagem e propriedades do mapa para o Caminhadas função Overlay .
7

criar uma subclasse para a função HikingOverlay . Use uma subclasse para que você não substituir os atributos da classe pai. Por exemplo, digite :

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

Anexar a sobreposição dos painéis na janela do Google Maps. Você pode usar HTML " div " elementos para posicionar precisamente a sobreposição ou simplesmente anexá-lo a um painel , se a sobreposição cobre todo o mapa. Por exemplo, criar a divisão e anexar o mapa para o painel , digitando:

HikingOverlay.sub.onAdd = function () { var

divisão = document.createElement (' div ');

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

sub_div = div ;

var painéis = this.getpanes (); panes.overlayLayer.appendChild ( div );

}
9

Coloque a cobertura sobre o mapa usando o método de " desenhar" . Por exemplo, digite :

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

Converter a projeção da imagem de latitude e longitude coordenadas para pixels para a colocação no div . Por exemplo, digite :

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

Especifique as dimensões do estilo div para ajustar a imagem . Por exemplo, digite :

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

Salve o arquivo e testá-lo . Google exibe sua imagem sobre o seu mapa existente do Google. Se a imagem não estiver posicionado corretamente, especificar o posicionamento adicional coordenadas para o seu código para colocar precisamente a imagem.