All Articles Dreamweaver
Inserir um mapa do Google em uma Div PA no Dreamweaver CS5
David Smith on Mon, August 15th 8 comments
Integrating GoogleMaps in to your website is all the rage in the web design world. It's also quite straightforward to do in Dreamweaver. David Smith, Authorised Adobe Trainer, shows you how.

Todos nós temos, sem dúvida, utilizados instalação do Google Map excelente para procurar locais. Não seria ótimo poder usá-las para ajudar as pessoas a encontrar seus locais, também? Além do mais, não seria ainda maior se a ver que eles não têm que deixar o conforto da sua página web? É realmente muito simples de fazer no Dreamweaver .


Passo 1 - Preparando o Groundwork

No Dreamweaver eu vou criar uma nova página para isso: Arquivo

New Page.

Nova página.


Na página eu vou começar por criar uma Div PA para manter meu mapa na página. Primeiro certifique-se que a sua exibição de página é definida como Designer de modo que você pode ver a página atual.

Design View Button.

Botão Modo Design.


A partir do Painel Insert escolha comum como a categoria e selecione 'Draw AP Div.

Draw AP Div button.

Desenhe AP Div botão.


Você cursor irá agora mostrar uma cruz, com a mira desenhar uma caixa em algum lugar na página. Tentar torná-lo do tamanho que você gostaria de ver seu mapa exibido. Ele pode ser refinado mais tarde.

AP Element on screen.

AP elemento na tela.


Esta caixa irá conter o mapa. A razão de eu ter criado essa caixa para ver o mapa é a facilidade com que eu possa modificá-lo. Agarrando o pequeno quadrado branco no canto superior esquerdo da caixa me permite reposicionar a caixa de qualquer lugar.

No painel de propriedades as propriedades da Div será exibida. Mudar o ID para 'MapBox' e definir o W

Properties Panel.

Painel de propriedades.


Passo 2 - Inserir o Mapa

Use seu navegador para procurar um local utilizando o Google Maps. Eu procurei o Gabinete de Formação eu uso em Glasgow.

Glasgow Google Map.

Glasgow Google Mapa.


No Mapa do Google há alguns pequenos ícones no canto superior direito. Clicando no link uma chamada irá abri-lo.

Goole map link button.

Google Map botão de link.


Selecione todo o código dentro da caixa "Colar HTML para incorporar ao website" e copiá-lo.

Dica: Clique três vezes em rápida sucessão sobre o código para selecionar tudo, copie (Ctrl-C) para se certificar que você não perca nenhum.

Google Map Insert Code.

Google Code Inserir Mapa.


Este código permitirá que a re-exibição da página com o Google Map totalmente interativo da sua localização dentro da Div AP usando um iframe (quadro de inserção).

Para inserir este código em nosso MapBox Div AP no Dreamweaver, colá-lo na visualização de código entre os

Dica: A maneira mais fácil para se certificar de que o código é inserido no local correto é mudar para modo Design e clique dentro da Div AP MapBox na página para que o cursor piscando fica dentro da

Code View Cursor.

Cursor Ver código.


Mudar para Split Ver para ver tanto o design eo código. O cursor agora estará piscando entre as tags div correta abertas e fechadas e você pode colar o código (Command-V).


Passo 3 - Visualização

Ligar o Live View no Dreamweaver e do mapa interativo vai aparecer na página dentro do seu Div MapBox.

Map Page.

Página do Mapa.


Você sempre pode usar o painel Properties para redimensionar a Div MapBox se necessário, apenas certifique-se ligar o Live View off para ativar os parâmetros.

Se você gosta de um desafio mais difícil, então você também pode usar Cascading Style Sheets (CSS) para formatar o MapBox com bordas, fundos, etc, mas isso é para outro artigo.


Learn more about Dreamweaver here.


Comments (8)

You must be logged in to comment.

  • Dennis
    Thank you so much. I have bookmarked your page for future reference. Valuable info!
    • 6 years ago
    • By: Dennis
    Reply
  • Skye
    For non Dreamweaver users, just a note that an AP Div is just a div with absolute positioning (AP). If you look at the source code image you can see the absolute positioning style that Dreamweaver has applied to the div.
    • 8 years ago
    • By: Skye
    Reply
  • David Smith
    You are absolutely right Skye, thank-you
    • 8 years ago
    • By: David Smith
    Reply
  • Dear author, I want to express my sincere thanks of this useful article.
    • 7 years ago
    • By:
    Reply
  • David Smith
    Thank-you
    • 7 years ago
    • By: David Smith
    Reply
  • elisabetta
    grazie
    • 6 years ago
    • By: elisabetta
    Reply
  • David Smith
    Prego
    • 6 years ago
    • By: David Smith
  • Sandra
    Hello there, I need some help. I want to create a structure with 4 frames: Left, Top, Main and Right. In the top frame I have a Banner, in a table, and I want to insert a Spry Menu Bar. The problem is, if I want in that Spry a Vertical Menu it doesn't shows up in the main frame. How do I make it visible? Best regards.
    • 6 years ago
    • By: Sandra
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: