Como adicionar o Google Map em seu Web

Web2.0 também significa software distribuído através de API (Application Programming Interface). A capacidade de recursos de alavanca e funcionalidade outras posições remotas é extremamente útil, na realidade, como a Internet. Além do Yahoo, com o seu estilo Toolkit 2.0, até mesmo o Google - e dentro do geo-referenciamento - oferece aos ferramentas gratuitas, neste caso, para o tratamento e gestão de mapas.

API do Google Maps permite que você insira o Google Maps em suas próprias páginas web utilizando Javascript.

Google Maps

A primeira coisa a fazer antes que você possa começar a experimentar com a API, você se cadastra no site http://www.google.com/apis/maps/ , a fim de obter uma chave (a UID) no local de uso. Na verdade, para cada tecla Web é necessário!

Google oferece é um serviço gratuito que uma empresa de soluções de intranet e usa avançados - Veja: Google Maps for Enterprise

A versão gratuita, no entanto, já resolve todas as necessidades possíveis. Premiado com o fundamental é proposto automaticamente uma página de resumo com uma amostra de código Javascript. O primeiro passo é recuperar longitude e latidudine da área que você deseja ver.

1
2
3
4
5
6
ShowMap função () {
GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) {
new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ("mapa"));
new GLatLng ( 37.4419 , - 122.1419 ) , 13 ) ; . mapa setCenter (novo GLatLng (37,4419 - 122,1419), 13);
}
}

O código de exemplo é bastante simples. presente sulla pagina, in questo caso un DIV con id="map" . Baseia-se de uma classe sull'instanza GMap2() ligado a uma DIV na página, neste caso, um DIV com id="map" .
A documentação completa da API , em seguida, fornece mais alimento para a exposição, tais como a definição da visão híbrida - via satélite / mapa - a ativação de controles de zoom e movimento, a capacidade de conectar um "engraçado" com uma exibição personalizada.

Uma maneira de ativar uma série de verificações é:

1
2
3
4
5
6
new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ("mapa"));
new GLatLng ( 37.4419 , - 122.1419 ) ; centro var = new GLatLng (37,4419 - 122,1419);
center , 17 , G_HYBRID_MAP ) ; // Mappa ibrida mapa. setCenter (centro, 17, G_HYBRID_MAP) / map / híbrida
new GMapTypeControl ( ) ) ; . mapa AddControl (novo GMapTypeControl ());
new GLargeMapControl ( ) ) ; . mapa AddControl (novo GLargeMapControl ());
new GScaleControl ( ) ) ; // Zomming mapa. AddControl (novo GScaleControl ()) / / zomming

Você também pode associar um GMarker, uma "história em quadrinhos", com orientações adicionais e não reagir aos cliques do mouse.

1
2
3
4
5
6
7
8
9
10
11
'<div class="td_testo"><strong>Prova Mio Nome</strong><br />Via Roma, 100<br />00100 - Roma, Italia</div><div class="menu"><a WINDOW_HTML var = '<div class="td_testo"> <strong> Tente meu nome </ strong> <br /> Via Roma, 100 <br /> 00100 - Roma, Itália </ div> <div class = "menu" > <a chegar até nós </ a> </ div> ';

new GMarker ( center ) ; var marcador = new GMarker (centro);
marker ) ; . mapa addOverlay (marcador);
marker , 'click' , function ( ) { GEvent. AddListener (marcador, 'click', function () {
WINDOW_HTML ) ; . marcador openInfoWindowHtml (WINDOW_HTML);
});
marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marcador, 'infowindowclose', function () {
center , 2 ) ; . mapa recenterOrPanToLatLng (centro, 2);
});
WINDOW_HTML ) ; . marcador openInfoWindowHtml (WINDOW_HTML);

No site da documentação completa atende todas as nossas necessidades, o uso de marcadores especiais, JSON, AJAX e muito mais. Entre outras coisas, você vai encontrar muitos exemplos de exemplos de código online. A ferramenta - gratuita - para uso imediato!

36 comentários para: " "

  1. 16 de março de 2008 Villa Centopino :

    Eu não posso deixá-lo entrar os quadrinhos ... você pode ter mais informações em italiano ou um exemplo de como fazer?
    obrigado

  2. 17 de marco de 2008 Giovan Battista Fazioli :

    @ Villa Centopino: o exemplo é mostrado no Post. O problema que você está tendo exatamente? Por algum erro?

  3. 28 março, 2008 Villa Centopino :

    Olá
    Eu inseri o cômico não está copiando e colando, nenhum erro ...
    No entanto, continuando a olhar eu resolvi
    Olá e obrigado

  4. 13 maio de 2008 por armar:

    é possível derivar latitude e longitude a partir do nome da cidade e na estrada?

  5. 14 de maio de 2008 Google Maps: como obter Latitude e Longitude de um endereço | Undolog.com :

    [...] Desta vez eu responder a um comentário com um post, dado o interesse geral. Armando me perguntou se era possível, por meio do Google Maps, Latitude e Longitude obter a partir de [...]

  6. 26 de maio de 2008 Alberto:

    Olá,
    Eu poderia usar uma mão.
    Eu gostaria que minha quadrinhos já foi exibido sem ter que fazer o clique com o mouse.
    Também eu desejo que o cômico contém as opções "encontra o caminho para aqui e aqui."
    E 'uma semana nós sbattola cabeça, me dê um favor manoper.
    Obrigado e até breve

  7. 02 de julho de 2008 Beppe:

    Olá a todos Eu queria perguntar por que eu não vejo o endereço markatore mitrova e não o endereço ...

    1
    2
    ( address + " not found" ) ; (Alerta (address + "não encontrado");
    ....

    Eu escrevi assim:

    1
    2
    3
    4
    5
    ...
    "load(); onload = "load ();
    showAddress ('Road Portichina, LU 20 55049 Viareggio, Itália'); "
    "GUnload();" onUnload = "GUnload ();"
    ......

    muito obrigado

  8. 24 de outubro de 2008 Marcadores 18 Outubro a 24 de outubro - Dexle:

    [...] Como adicionar o Google Map em seu Web - heyos_ad_user = 8,748; heyos_ad_type = "G"; heyos_ad_format = "8"; heyos_color_border = "000066"; heyos_color_bg = "FFFFFF"; heyos_color_link = "005B88" = heyos_color_text " 000000 "; heyos_color_url =" 5F5F5F "[...]

  9. 11 nov 2008 Adote um Post | Undolog.com :

    [...] Exemplo, na lembrança da redação deste texto continua sendo um dos post mais visto Como inserir o Google Maps em seu próprio web, com 17.410 views. Se você tem produtos ou serviços relacionados ao Google Map, ou pelo menos que [...]

  10. 20 de novembro de 2008 Andreas :

    Hej!

    Até det är här Helt ny med Google Maps API.
    Jag önskar Hjälp med att FA på plats de-KOD som Bitar krävs. Följande önskar jag uppnå.

    Har en webbsida dar um Fyller lado, o light uppgifter Dar branda Annat endereço, Stad och terra. Homem klickar "enviar" och SA Todos informação Lagras klart o en databas.

    Min önskan, att homem nu är på en visningssida skall Kunna Klicka på en och databasen os hämtas pós fazer toda a informação och vistos på en sida. Det som jag önskar skall ske, är att en karta vistos dar uma mão har en Liten pin-point apenas på den endereço, ort terra och för den som var registrerad Posten.

    HUR går för att jag tillväga Skapa que enkelt och bra på ett Satt.
    Skriver jobbar mot och Lite PHP MySQL.

    Tacksam om en någon önskar hjälpa okunnig själ!

    -Andreas

  11. 20 de novembro de 2008 Giovan Battista Fazioli :

    @ Andreas: Andreas querida, você pode escrever a sua pergunta em Inglese?

  12. 20 de novembro de 2008 Andreas :

    @ Giovan Battista Fazioli:

    @ Andreas: Andreas querida, você pode escrever a sua pergunta em Inglese?

    Olá!

    É completamente novo para isso com a API do Google Maps.
    Eu quero ajudar a entrar no lugar do código-bit, conforme necessário. A seguir, eu gostaria de alcançar.

    Tem um site onde você preenche alguns dados, que entre outras coisas, endereço, cidade e país. Você clica em "enviar" e todas as informações armazenadas em um banco de dados Claramente sei.

    Que agora é o meu desejo em uma página de exibição é para clicar em uma entrada no banco de dados e, em seguida, todas as informações recuperadas e apresentadas em uma página. O que eu espero vai acontecer é que um mapa mostra onde você tem uma pin-point pequeno apenas no endereço, cidade e país que foi registrado para o cargo.

    Como eu faço para criar isso de uma maneira simples e útil.
    Escreve um pouco de PHP e MySQL contra obras.

    Grato se alguém querendo ajudar uma alma ignorante!

    -Andrew

  13. 19 de janeiro de 2009 Giovan Battista Fazioli :

    @ Dario: ver geocodificação reversa. Perscrutando a fonte da página, você encontrará o código que você precisa, comunqueq seja, o "core" da solução é:
    Adicionar um ouvinte para interceptar o clique e criar um objeto GClientGeocoder :

    1
    2
    map , "click" , getAddress ) ; . GEvent AddListener (mapa, "click", getAddress);
    GClientGeocoder ( ) ; GClientGeocoder geocoder = new ();

    O manipulador do clique usando o objeto GClientGeocoder para recuperar as informações do local a partir de latitude e longitude:

    1
    2
    3
    4
    5
    6
    overlay , latlng ) { função getAddress (overlay, LatLng) {
    latlng != null ) { if (LatLng! = null) {
    address = LatLng;
    latlng , showAddress ) ; geocoder. GetLocations (LatLng, showAddress);
    }
    }

    Em seguida, finalmente, o manipulador showAddress irá mostrar os detalhes do alojamento através place.address

  14. 19 de janeiro de 2009 Dario:

    Você quer saber se você pode encontrar um site que funciona ao contrário, ou seja, entrar nas coordenadas que você pode encontrar o lugar.

  15. 21 de fevereiro de 2009 Angeliam:

    Olá a todos!
    Peço ao lado de especialistas, porque eu tive um problema que não consigo resolver ... Deixe-me explicar:
    Eu uso o Google Maps API para fazer um mapa navegável e com zoom com a extensão. Tiff georreferenciada que é! Eu encontrei as instruções com o qual eu, antes de tudo, percebi que a minha imagem deve ser dividida em telhas, apenas com os recursos que eu encontrei ele diz que você pode fazer isso com o Photoshop ou Paint Shop Pro (ou algum outro programa pouco , eu acho), mas ele me diz como ... e eu estou preso a este ponto!
    Por favor ... me ajude, eu realmente preciso!

  16. 3 mar 2009 Claudio :

    Ola ESTOU Querendo passar Meu mapa, ja Feito los Google Earth e Maps API para, parágrafo Poder ter a Visão los Meu Blog hum Igual no Google Earth, locais los Meu computador. Se este e Posivel, mas Como desconhesco fazerlo. Poderiam me dar Algumas DICAS de Como Fazer, ou ondas adquirir sândalo Exemplo.
    Meu Temor ter que es recadastrar cadastrado Tudo los Meu mapa, de Todos os ponto de espera.

    Grato Pela Ajuda.

    Claudio G. Pagliaro
    cgpagliaro.arroba.gmail.com

  17. 20 mar 2009 enrico beb:

    Oi tudo, eu tenho um problema, eu criei o código API para inserir google maps no meu site. Nas obras locais sem problemas, mas uma vez que eu inserir ke na internet e ir para visitar a página onde eu recebo a mensagem está inserida ke o servidor API rejeitou seu pedido e isso é porque o código de API não é válido porque ele gerado para outro site . O que devo fazer?

  18. 20 mar 2009 Giovan Battista Fazioli :

    @ Enrico beb: você pode regenerar a chave! Ou melhor! Se você já usou "local", como você diz, você terá gerado uma chave para um host diferente online? Na prática, você tem que gerar uma chave, dependendo do servidor em que você usá-lo.

  19. 24 de julho de 2009 os mapas do Google de publicidade :

    [...] É realmente trivial. Vamos ver a base de script para integrar o procedimento normal para a inclusão do local no mapa google. Primeiro, veja como transformar a publicidade tradicional e, em seguida, na barra de ferramentas [...]

  20. 29 de agosto de 2009 Undolog.com »Como usar o Google Maps em Adobe Flash CS4 :

    [...] No Adobe Flash, você pode usar uma ampla gama de APIs externa fornecida pelos serviços da Web, como o Facebook, Twitter ou Flickr. Neste tutorial veremos como integrar, em um muito simples, os serviços do Google Maps em um filme / aplicativo Adobe Flash CS4. Eu afirmam que o procedimento para utilizar o Google Maps no Flash é muito semelhante ao que acontece em HTML / JavaScript (para mais informações consulte Como adicionar Google Map em seu próprio web). [...]

  21. 01 de setembro de 2009 Undolog.com »componente do Google Maps para o Flash :

    [...] Lançou a API - em Javascript - para introduzir seus mapas em qualquer site Viediamo web como fazer a mesma coisa com o [...]

  22. 15 jun 2010 Wpae:

    Desculpe-me, você sabe como excluir google escrito "empréstimos"?
    Eu tenho um mapa como um híbrido, mas é muito pequena, de modo que o texto deve ser em excesso, e é graficamente feio.

  23. 25 de setembro de 2010 Alpha:

    Eu tenho um problema, usar o Flash CS5 no Windows 7, eu baixei o arquivo zip, eu copiei o componente para o local especificado, mas o flash não pode encontrá-lo nas componentes da biblioteca .. Além disso, se eu clicar duas vezes no componente, flash tenta importá-lo, mas a certa altura ele diz: "Unexpected file format".
    onde poderia ser o problema?

  24. 26 set 2010 Wpae:

    @ Alpha: Eu nunca usei flash na minha vida, para que eu pudesse estar errado, mas que é um código Javascript, Actionscript não.

  25. 26 set 2010 Giovan Battista Fazioli :

    @ Wpae:

    Eu baixei o arquivo zip

    Zip do qual você fala? Este post explica como usar mapas com Javascript, talvez referindo-se a um outro artigo?

  26. 13 de fevereiro de 2011 Mariano:

    Olá eu queria perguntar se era possível, de alguma forma, alterar esses botões feios! Talvez com imagens definidas por nós ...

  27. 14 fevereiro de 2011 Giovan Battista Fazioli :

    @ Mariano: Eu não acho que isso é possível ... talvez você pode fazer é não visualizarli e criar o seu fazê-lo fazer a mesma coisa usando o API, que será verificada embora.

  28. 11 de marco de 2011 Chiara:

    Olá,
    você sabe se a versão gratuita do Google Maps há um limite para chamadas a partir de um site específico para o Google Maps?

    Obrigado!
    Chiara

  29. 28 de marco de 2011 Vanessa_Megg:

    Olá, eu escrevi este código, mas agora eu quero importar a nuvem exatamente como aparece no Google Map. Eu vi um post semelhante aqui para sempre, mas eu não posso entrar com o código corretamente, provavelmente porque eu inseri-lo no lugar errado.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    google . maps . LatLng ; ... importação com google maps LatLng;
    google . maps . Map ; ... importação com google maps Mapa;
    google . maps . MapEvent ; ... importação com google maps MapEvent;
    google . maps . MapType ; ... importação com google maps mapType;
    google . maps . controls . ZoomControl ; ... importação com Google Maps controles ZoomControl.;
    google . maps . controls . PositionControl ; ... importação com Google Maps controles PositionControl.;
    google . maps . controls . MapTypeControl ; .. importação pt google maps controles. MapTypeControl.;
    google . maps . overlays . MarkerOptions ; ... importação com Google Maps sobreposições MarkerOptions.;
    google . maps . overlays . Marker ; ... importação com Google Maps sobreposições marcador.;
    google . maps . InfoWindowOptions ; ... importação pt Google Maps InfoWindowOptions;
    google . maps . MapMouseEvent ; ... importação com google maps MapMouseEvent;

    : Map = new Map ( ) ; var map: Map = new Map ();
    key = "ACfg....." ; . chave map = "ACfg .....";
    setSize ( new Point ( 562 , 458 ) ) ; . mapa setSize (novo ponto (562, 458));
    x = 350 ; mapa x = 350.;
    y = 150 , 05 ; mapa y = 150, 05.;
    addEventListener ( MapEvent . MAP_READY , onMapReady ) ; . mapa addEventListener (MapEvent. MAP_READY, onMapReady);

    addChild ( map ) ; . este addChild (mapa);

    event : MapEvent ) : void { função onMapReady (event: MapEvent): void {
    setCenter ( new LatLng ( 45.97553673095479 , 12.229607105255127 ) , 16 , MapType . NORMAL_MAP_TYPE ) ; . mapa setCenter (novo LatLng (45,97553673095479, 12,229607105255127), 16, mapType NORMAL_MAP_TYPE.);
    addControl ( new ZoomControl ( ) ) ; . mapa AddControl (novo ZoomControl ());
    addControl ( new PositionControl ( ) ) ; . mapa AddControl (novo PositionControl ());
    addControl ( new MapTypeControl ( ) ) ; . mapa AddControl (novo MapTypeControl ());

    Marker = new Marker ( new LatLng ( 45.97553673095479 , 12.229607105255127 ) ) ; var marcador: marcador = new marcador (novo LatLng (45,97553673095479, 12,229607105255127));
    addOverlay ( marker ) ; . mapa addOverlay (marcador);

    }

    Eu estou ficando louco!

  30. 28 de marco de 2011 Giovan Battista Fazioli :

    @ Vanessa_Megg: Linha 17:

    1
    y = 150 , 05 ; mapa y = 150, 05.;

    Eu vejo um erro ... que você usou uma vírgula em vez de um período ... mas eu não sei se é isso que lhe dá problemas. Você tem mais alguma informação?

  31. 29 de março de 2011 Vanessa_Megg:

    @ Giovan Battista Fazioli:
    Ok, agora o código funciona. Mas a minha pergunta era uma "coisa: se você pudesse importar a nuvem da Google Map na íntegra, com todos os sentidos e, em arquivos flash .. Tenho visto muitos que pediram ao redor, mas não encontrou nenhuma solução para a coisa ... :/

  32. 29 de março de 2011 Giovan Battista Fazioli :

    @ Vanessa_Megg: se por "cloud" você quer dizer os quadrinhos, o único com as informações sobre o local indicado, você não pode "extrapolar" do componente Flash. O que você poderia fazer, se eu entender suas necessidades, você "ler" as informações e propô-las em outro lugar. Além disso, como você pode ver no código acima, o conteúdo do "cômico" é gerado em HTML:

    1
    WINDOW_HTML ) ; . marcador openInfoWindowHtml (WINDOW_HTML);

    . Através do método openInfoWindowHtml disponibilizados pelo marker . O que eu não consigo entender é quando você diz "importar a nuvem da Google Map na íntegra, com todos os sentidos e, em arquivos flash .."

  33. 18 de julho de 2011 Igor :

    @ Giovan Battista Fazioli: Olá! Bem, eu teria o mesmo problema. Eu criei a chave de API com o endereço do local para onde vai. Se a página eu assisto local me mostra o mapa (que não deve) on-line em vez me disse que a chave de API está errado. Eu continuo a repetir o procedimento, mas Nisba! Eu sou, tipo, duas horas em um mapa do Google ... eu não posso mais

  34. 18 de julho de 2011 Giovan Battista Fazioli :

    @ Igor: os problemas encontrados com o Adobe Flash pode ser o resultado da nova política do Google. Para alguns ", na verdade, não é mais necessário para gerar uma chave, o novo Google API só funcionam com a importação (apenas obras).

  35. 26 de janeiro de 2012 Sting:

    @ Dario - você pode ver um exemplo aqui: http://www.fight4fun.it/ clicando no item: MAPS
    Espero que ajuda ...

Deixe um comentário

TAG XHTML permita: Código de acesso:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL