Colocar Mapa num site

Rafael Pinto

Rafael Pinto

Membro
Boa Tarde.

Como sou novato, talvez isto seja demais para mim, mas colocando uma ideia na cabeça, é difícil sair de lá. E como não sou de desistir, bora lá.

Bem eu vi alguns vídeos, mas talvez eles não sejam o mais adequado para mim, visto estar a começar a aprender web development. Porque vi umas coisas do KEY API, etc etc e isso baralhou-me todo.

Na página contatos num site de uma empresa, queria colocar o pin a mostrar onde é que se encontra a loja.

Alguém sabe a maneira mais simples/fácil de conseguir fazer?

Pode ser um tutorial ou vídeo que mostra como fazer.

Obrigado pela vossa ajuda que aprecio muito!
Abraços
 
bashir disse:
http://www.map-embed.com/
Clicar para expandir...

exemplo.jpg


eu usei este mapa.
Coloquei o codigo no html. Como queria centrá-lo no css, criei uma div e coloquei text-align:center, mas não funcinou.

Tenho que usar usar algo referente a este código?:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:500px;width:1360px;"><div id="gmap_canvas" style="height:500px;width:1360px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(41.2786035,-8.380174899999929),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(41.2786035, -8.380174899999929)});infowindow = new google.maps.InfoWindow({content:"<b>FlyBaby</b><br/>Pra&ccedil;a 20 de Maio 53<br/>4590-367 Pa&ccedil;os de Ferreira" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

obrigado!
 
A solução está no código HTML que puseste. Vê o height e width e cria uma div com espaço ou uma classe para todo e mapa e metes margin-left: auto; margin-right: auto.

Já tinham explicado como centrar num post anterior teu.

Deves começar a usar codeacademy e pesquisar, em vez de questionares o fórum para cada dúvida, senão nunca aprendes...

Boa sorte
 
pmpv disse:
A solução está no código HTML que puseste. Vê o height e width e cria uma div com espaço ou uma classe para todo e mapa e metes margin-left: auto; margin-right: auto.

Já tinham explicado como centrar num post anterior teu.

Deves começar a usar codeacademy e pesquisar, em vez de questionares o fórum para cada dúvida, senão nunca aprendes...

Boa sorte
Clicar para expandir...
obrigado!
Tens razão! ;)

Mas eu fiz isso, crieu uma div class mapa e coloquei no css .mapa {margin-left:auto; margin-right:auto;}, mas ele continou no lado esquerdo.
 
Última edição:
boa tarde.
Então, mas aí é que está o problema. Porque eu já fiz isso e não dá:

.mapa {width:1000px; height:500px; text-align:center;}


o html que tem, que foi o que o site do mapa me deu foi este:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:500px;width:1000px;"><div id="gmap_canvas" style="height:500px;width:1000px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(41.2786035,-8.380174899999929),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(41.2786035, -8.380174899999929)});infowindow = new google.maps.InfoWindow({content:"<b>FlyBaby</b><br/>Pra&ccedil;a 20 de Maio 53<br/>4590-367 Pa&ccedil;os de Ferreira" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

já olhei várias vezes para ver se existe alguma coisa no código que obrigue estar na esquerda, mas não encontrei.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo