Aqui você verá artigos sobre HTML
Moderador: web
 por web Offline » Sex Fev 01, 2008 9:05 am
|
|
Vou mostrar aqui como ter um google maps com referência ( balão que ao ser clicado informe algo sobre determinado local ).
Veja abaixo a base que vai ser usada, com 2 destaques no estádio Mário Filho ( maracanã )
- Código: Selecionar todos
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="pt-br">
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAsIX-WJMi9k_JcH-g7gs2qhTnuGeCkNQ7RLx9NuffDd1k5DRFphS3UCm3kFg3QgCMJ1blSj34xHVaFA"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-22.911717,-43.230171), 0);
map.enableContinuousZoom();
window.setTimeout(function() {map.setZoom(18);}, 1);
// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
if(number==1) {
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>Endereço</b><br>maracanã");
});
}
if(number==2) {
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>Endereço</b><br>outro ponto do maracanã");
});
}
return marker;
}
// number 1
var point = new GLatLng(-22.911717,-43.230171);
map.addOverlay(createMarker(point, 1));
// number 2
var point = new GLatLng(-22.911000,-43.230000);
map.addOverlay(createMarker(point, 2));
}
}
</script>
<script type="text/javascript">
var divActual = "ctx-tv";
function divShow(divName) {
var divMenu = document.getElementById('ctx-menu');
var divTV = document.getElementById('ctx-tv');
var divAct = document.getElementById(divActual);
divMenu.style.display='none';
divTV.style.display='none';
divAct.style.display='none';
var element = document.getElementById(divName);
element.style.display='block';
divActual = divName;
}
function divHide(divName) {
var divMenu = document.getElementById('ctx-menu');
var divTV = document.getElementById('ctx-tv');
divMenu.style.display='block';
divTV.style.display='block';
var element = document.getElementById(divName);
element.style.display='none';
}
</script>
</head>
<body onload="divShow('ctx-quadro-03');load();" leftmargin="0" topmargin="0">
<div id="container">
<div id="ctx-logo"></div>
<div id="ctx-menu">
<SCRIPT TYPE="text/javascript">
AC_FL_RunContent( 'codebase', 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '550', 'height', '150', 'src', '_media/menu', 'quality', 'best', 'wmode', 'transparent', 'bgcolor', '#FFFFFF', 'NAME', 'menu', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'movie', '_media/menu' ); //end AC code
</SCRIPT>
<NOSCRIPT>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="150" id="menu" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="_media/menu.swf" /><param name="quality" value="best" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="_media/menu.swf" quality="best" wmode="transparent" bgcolor="#ffffff" width="550" height="150" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></NOSCRIPT>
</div>
<div id="ctx-tv">
<SCRIPT TYPE="text/javascript">
AC_FL_RunContent( 'codebase', 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '743', 'height', '364', 'src', '_media/tv_geral', 'FlashVars', 'newmovie=tv_geral_05', 'quality', 'best', 'wmode', 'transparent', 'bgcolor', '#FFFFFF', 'NAME', 'tv_suite', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'movie', '_media/tv_geral' ); //end AC code
</SCRIPT>
<NOSCRIPT>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="743" height="364" id="_media/tv_geral" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="FlashVars" value="newmovie=tv_geral_05" />
<param name="movie" value="_media/tv_geral.swf" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="_media/tv_geral.swf" FlashVars="newmovie=tv_geral_05" quality="best" wmode="transparent" bgcolor="#ffffff" width="743" height="364" name="_media/tv_geral" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></NOSCRIPT>
</div>
<div id="ctx-text" class="txtNormal">
<div class="pad-text">
</div>
</div>
<div id="ctx-quadro-03" class="ctx-quadro ctx-quadro-mapa" style="display:none;">
<div id="map" style="width: 740px; height: 379px;"></div>
</div>
</div>
</body>
</html>
Para que você possa alterar o script para seu local, vá até a linha
map.setCenter(new GLatLng(-22.911717,-43.230171), 0);
Esses valores são os posicionamentos para mostrar a área do estádio.
Para obter o posicionamento para sua área acesse o link:
Google Maps referência Rio de Janeiro
A partir daí, você vai posicionando, movimentando o mapa até posicionar o local que deseja, após isso, escolha sobre a figura a opção Mapa, quando chegar ao ponto que precisa mostrar, clique no link Criar link para esta página
Vai aparecer na primeira caixa um endereço, copie todo ele.
Na string ( referência no link ) vai ter uma string chamada ll
documento.php?ll=abc...
exemplo: ll=-22.626687,-43.146057
Esses posicionamento vão entrar em
map.setCenter(new GLatLng(-22.626687,-43.146057), 0);
Quanto aos balões de referência, veja abaixo, destaquei um dos balões
if(number==1) {
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>Endereço</b><br>maracanã");
});
}
// number 1
var point = new GLatLng(-22.911717,-43.230171);
map.addOverlay(createMarker(point, 1));
veja que onde tem // number 1 é referente ao if acima, o outro é // number 2 e o if seguinte.
A posição do GLatLng é referente a própia posição do mapa, só que você pode definir alguns metros ou kilômetros de distância do ponto, veja:
POSICIONAMENTO DO MAPA
GLatLng(-22.911717,-43.230171)
POSICIONAMENTO DO PRIMEIRO BALÃO
GLatLng(-22.911717,-43.230171)
Note que o segundos balão tem outra distância
GLatLng(-22.911000,-43.230000)
Quem não quer ter esse trabalho todo, o própio link que indiquei já passa todo o mapa mastigado, só que sem os balões de referência, que só podem ser aplicados na forma do script acima.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb [@] hotmail [.] com
web
ADMIN
Mensagens: 11904
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para Artigos sobre HTML
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante
|
|
|
