google maps..

Lucia_na · Novembro 19, 2008

Olá pessoal!!

Ja procurei aqui no forum ja procurei na internet mas nao consegui fazer ainda uma funcao que cria varios pontos(Marker).

Tipo tenho uma listagem de hoteis, e preciso que mostre no mapa todos os hoteis pelo endereco, que tenho no meu banco.

Por favor, se alguem tiver um exemplo ou um link de artigo de listagem de varios pontos, usando ASP agradeço.

Achei uma funcao como segue abaixo: mas usa latitude e longitude e eu preciso usar o endereco, e tb nao funciona direito essa ai.

sql = "SELECT nome, endereco from hoteis"
Set QueryHotel = Conexao.Execute (sql)
%>
minha chave
<script type="text/javascript">
//<![CDATA[
function load() 
{
if (GBrowserIsCompatible()) 
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(-9.6498987,-35.699826),15);
var baseIcon = new GIcon();
baseIcon.shadow = "";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

<% do while not QueryHotel.eof 
%>

function createMarker(point,index) 
{  
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml("<%=QueryHotel("endereco")%>");
});
return marker;
}

var point = new GLatLng(<%=QueryHotel("latitude")%>,<%=QueryHotel("longitude")%>);
map.addOverlay(createMarker(point)); 

<%QueryHotel.movenext%>
<%loop%> 
}
}
//]]>
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<div id="map" style="width: 545px; height: 270px"></div>
</body>

Obrigada

Luciana

xanburzum · Novembro 20, 2008

em ASP.Net você pode usar o ASP.NET GoogleMaps User Control

GoogleMaps.Subgurim.NET é o mais avançado controle do Google Maps para ASP.NET 2.0.

Com todo o poder oficial do API do Google Maps, mas ainda assim sem a necessidade de uma única linha de código javascript, só ASP.NET

Basta arrastar o controle no Visual Studio, e com algumas linhas de código que você será capaz de usar o poderoso Google Maps!

exemplo:

arq.aspx

<cc1:GMap ID="GMap1" runat="server" />

arq.aspx.cs

GMap1.addControl(new GControl(GControl.preBuilt.GOverviewMapControl));

GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));

GMarker marker = new GMarker(new GLatLng(39.5, -3.2));
GInfoWindow window = new GInfoWindow(marker, "<center><b>GoogleMaps.Subgurim.NET</b></center>", true); 
GMap1.addInfoWindow(window);

e tambem pode usar o Google AJAX API.

Lucia_na · Novembro 20, 2008

ok...

mas o meu problema é que preciso em Asp classico mesmo..

alguem tem ideia?

Ted k' · Novembro 20, 2008

está usando um mapa seu ou do google maps...

ao meu ver olha só, colocaria o mapa de fundo e dentro do banco onde tem os hoteis colocaria duas colunas de x e y e criaria numeros de posicionamento, que seria o width e o height de uma div que estaria por cima do mapa

Lucia_na · Novembro 21, 2008

eu estou usando o google maps...

tenho uma tabela com muitos hoteis..

dai preciso pegar o endereco desses hoteis e apontar no mapa cada um deles.

ex: no mesmo mapa vai aparecer varios pontos(Hoteis), por cidade claro.

xanburzum · Novembro 21, 2008

Olha este código que achei na net, trata-se de um arquivo .htm onde colocamos o código do Google Maps API, que é todo escrito em javascript.

Este arquivo se resume as seguintes funções:

Neste ponto devemos inicializar o código do mapa, setando os controles que desejamos ter além de setar a posição (center) inicial do mapa e seu zoom.

java script:

<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY" type="text/javascript"></script>
	<script type="text/javascript">
 
	//<![CDATA[
	var zeroLat = new GLatLng(-23.588334358688655,-46.61230802536011); //Ponto central (local do evento)
	function load() {
	  if (GBrowserIsCompatible()) {
		var map = new GMap2(<a href="http://www.digitaldocumentsllc.com/">document</a>.getElementById("map"));
		map.addControl(new GLargeMapControl()); //Controles de Zoom, movimento
		map.addControl(new GMapTypeControl()); // Controle de tipo de mapa
		map.addControl(new GOverviewMapControl()); //Mapinha pequeno no canto		
		map.setCenter(zeroLat, 5); //Setar centro do mapa, com nivel 5 de zoom
 

   </script>

Depois deve-se criar uma função que fará a leitura de nosso arquivo XML e criará uma instância de cada item como um marker no Mapa. Note que para o evento, que é nosso ponto central, setamos um ponto (latitude,longitude) central e utilizamos um ícone especial para o mesmo.

java script:

//Handle XML
GDownloadUrl("arquivo.xml", function(data, responseCode) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker"); //Ler lista de pontos
  
  document.getElementById('count').innerHTML = "<b>Congressistas registrados: "+markers.length+"</b>"; //Publicar contagem
  
  for (var i = 0; i <markers.length; i++) {
	var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng")));
	
		if (markers[i].getAttribute("tit") == "titulo"){ //Exceção para ponto central
		var myIcon = new GIcon(G_DEFAULT_ICON,'ev-icon.png');
		myIcon.iconSize = new GSize(55, 54);
		myIcon.iconAnchor = new GPoint(16, 52);
	}else{
		var myIcon = G_DEFAULT_ICON;
	}
 
	var dados = { title: markers[i].getAttribute("tit"), icon: myIcon}; //Dados
	map.addOverlay(new GMarker(point,dados)); //Criar marker
	
	//Adicionar Linha que liga ponto ao evento
	var polyline = new GPolyline([
		zeroLat,
		point
	], "#ff0000", 1);
	map.addOverlay(polyline);
	
	//Adicionar na Lista (HTML)
	var ul = document.getElementById('ullista');
	var li = document.createElement('li');
	li.innerHTML = "<b>"+markers[i].getAttribute("tit")+" - \t\tDistância: "+ Math.round(point.distanceFrom(zeroLat)/1000)+ "km";
	ul.appendChild(li);
  }
});

Estrutura do XML

XML:

<?xml version="1.0"?>
<markers>
	<marker lat="-23.588334358688655" lng="-46.61230802536011" tit="titulo"/>
	<marker lat="-15.83783866346968" lng="-47.816104888916016" tit="endereço - estado,UF"/>
</markers>

Setar handler do Click

Agora devemos dizer ao mapa que ao clicar sobre ele deve ser fornecida uma caixa de dialogo cujos dados serão usados para criar o marker. Após criar este marker o sistema deve instanciar uma conexão AJAX para um backend ASP. Caso o usuário clique sobre um marker o script deve fazer o calculo ate o ponto central e apresentar uma janela de informação com este dado.

java script:

GEvent.addListener(map, "click", function(marker, point) {
  if (marker) { //Se estiver clicando sobre marker
	var tpoint = marker.getPoint(); //pegar ponto lat por long
	var distance = tpoint.distanceFrom(zeroLat)/1000;
	
	var cnt = "<div id='popup'>";
	cnt	+= "<br />Distância: "+Math.round(distance)+" km"; //Calcular distancia
	cnt	+= "</div>";
	marker.openInfoWindowHtml(cnt);
  } else { //Se estiver clicando em ponto em branco
	var nome = window.prompt("Digite: NOME - Cidade,Estado"); //Pegar texto para nome do marker
	if (!nome){
		return false
	}
	var dados = { title: nome }
	map.addOverlay(new GMarker(point,dados));
	
	//Adicionar no XML via AJAX
	var req = GXmlHttp.create();
	req.open("POST", "addmarker.php", true);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	
		//Montar parâmetros
	var param = 'tit=' + nome;
	param	+= '&lat=' + point.lat();
	param	+= '&lng=' + point.lng();
	req.send(param);
  }
});

Lucia_na · Dezembro 5, 2008

Ola xanburzum....

obrigada pela ajuda..

ate inseri o teu codigo que você disponibilizou acima, porem da erro de javascript, e nao aparece nada.

essa linha aqui req.open("POST", "addmarker.php", true); tenho que subtituir pelo meu arquivo certo??

req.open("POST", "mapa2.asp", true);

nao sei o que acontece, mas nao funciona...

Achei outro exemplo na net..porém esse tem o problema de repetir os pontos, na janela de informacao(no IE). Veja o codigo se conseguir me ajudar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Google Maps JavaScript API Example</title>
<link href="css/fonte.css" rel="stylesheet" type="text/css">
<%

SQL = "SELECT Hotel.cod_hotel, Hotel.cod_cidade, Hotel.nome, Hotel.endereco, Hotel.img1, cidade.descricao, Hotel.LATITUDE, Hotel.LONGITUDE FROM Hotel inner join cidade on Hotel.cod_cidade = cidade.cod_cidade WHERE cod_hotel = 1991 or cod_hotel = 26417 or cod_hotel = 32381 "
response.Write "<br>" & SQL
set RS = Conexao.Execute (SQL)

%>
<script src="http://maps.google.com/maps?file=api&v=2&key=minhaKey" type="text/javascript"></script>
	<script type="text/javascript">
	//<![CDATA[
	 function load() {
	  if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GMapTypeControl());
		map.addControl(new GLargeMapControl());		
		map.setCenter(new GLatLng(41.356910,2.141655),12);
		
	var baseIcon = new GIcon();
	baseIcon.shadow = "";
	baseIcon.iconSize = new GSize(20, 20);
	baseIcon.shadowSize = new GSize(20, 20);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	
<% while not RS.EOF %>

  function createMarker(point,index) {
  // Create a lettered icon for this point using our icon class
  var icon = new GIcon(baseIcon);
  icon.image = "../img/SUDT.gif";
  
  var marker = new GMarker(point,icon);
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml("<table border=0><tr><td><img src='../img/hoteis/<%=RS("img1")%>' border=0 width=57 height=75></td><td class=texto_detalhes> Código: <font face=Arial, Verdana color=#EA7500 style=font-size:11px; font-weight:bold><%=RS("cod_cidade")%></font><br> Tipo: <font face=Arial, Verdana color=#EA7500 style=font-size:11px; font-weight:bold><%=RS("cod_hotel")%></font><br> Bairro: <font face=Arial, Verdana color=#EA7500 style=font-size:11px; font-weight:bold><%=RS("endereco")%></font><br> Quartos: <font face=Arial, Verdana color=#EA7500 style=font-size:11px; font-weight:bold><%=RS("nome")%></font> quarto(s) sendo <font face=Arial, Verdana color=#EA7500 style=font-size:11px; font-weight:bold></font> suite(s)</td></tr></table>");
  });
  
  return marker;
  
}

	var point = new GLatLng(<%=RS("latitude")%>,<%=RS("longitude")%>);
	map.addOverlay(createMarker(point));	  

<%RS.movenext%>
<%wend%>	  


	  }
	}
	
	//]]>
</script>
  </head>
  <body onLoad="load()" onUnload="GUnload()">
	<div id="map" style="width: 545px; height: 500px"></div>
  </body>

obrigada

Luciana

xanburzum · Dezembro 5, 2008

ele gera algum tipo de erro ?!?!

Lucia_na · Dezembro 8, 2008

Ola..

* no teu exemplo que você passou da um erro de script...("Objeto esperado")

alterei a query e img e tb nessa linha aqui somente "req.open("POST", "addmarker.php", true)" - mudei para o nome do meu req.open("POST", "mapa.asp", true);

* no meu arquivo que passei no ultimo post..nao da erro nenhum aparece o mapa perfeitamente com o marker, a unica coisa que acontece é que para todos os marker é o mesmo endereco, e informacoes, tudo igual, mas ele gera em pontos diferentes.

Obrigada

Luciana

rodrigo jr · Novembro 23, 2009

Estou usando esse codigo para ler um XML com varios markers, mas não consigo botar na mensagem da janela uma imagem e link , somente texto. Você pode me ajudar ?

Modelo do XML -->

<markers><marker name="123456" html="Imóvel: Casa<br>Quartos: 3<br>Área Construida: 150m²<br>Endereco: Rua Dos Cacadores, 10<br>Bairro: Centro" label="<strong>Imóvel: Casa 3 Quartos</strong><br>Endereco: Rua Dos Cacadores, 10<br>Bairro: Velha Central" lat="-26.914476" lng="-49.109684" type="C016" address="Rua Dos Cacadores, 10, Blumenau, SC" /></markers>

Código -- >

//<![CDATA[

var iconCasa = new GIcon();

iconCasa.image = 'casa.png';

iconCasa.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';

iconCasa.iconSize = new GSize(14, 22);

iconCasa.shadowSize = new GSize(22, 20);

iconCasa.iconAnchor = new GPoint(6, 20);

iconCasa.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];

customIcons["C016"] = icon2;

var side_bar_html="";

var gmarkers = [];

var htmls = [];

var i = 0;

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(-26.916668, -49.071739),13);

GDownloadUrl(document.getElementById("arquivo").value, function(data) {

var xml = GXml.parse(data);

var markers = xml.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {

var name = markers.getAttribute("name");

var address = markers.getAttribute("address");

var html = markers.getAttribute("html");

var label = markers.getAttribute("label");

var type = markers.getAttribute("type");

var point = new GLatLng(parseFloat(markers.getAttribute("lat")),

parseFloat(markers.getAttribute("lng")));

var marker = createMarker(point, name, address, type, html, label);

map.addOverlay(marker);

}

document.getElementById("side_bar").innerHTML = side_bar_html;

});

}

function myclick(i) {

gmarkers.openInfoWindowHtml(htmls);

}

function createMarker(point, name, address, type, html, label) {

var marker = new GMarker(point, customIcons[type]);

//var html = "<b>" + name + "</b> <br/>" + address;

GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(html);

});

gmarkers = marker;

htmls = html;

side_bar_html += '<div class=navegador><p class=navlink><a href="javascript:myclick(' + i + ')">' + label + '</a></div></div>';

// side_bar_html+='<a href="javascript:myclick('+j+')">' + name + '</a><br>';

i++;

return marker;

}

//]]>

</SCRIPT>

Arquivado

google maps..

Recommended Posts

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rodrigo jr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante