API DO GOOGLE MAPS. QUEM CONHECE?
Estou com muita dificuldade em trabalhar com a Api do Google Maps. Achei uma dll no site googlemaps.subgurim.net que facilitou um pouco as coisas.
Com o código abaixo, consigo localizar no mapa o endereço digitado no TxtEndereço.text, mas o código não coloca a Marca sobre o lugar. O QUE ESTÃ FALTANDO??
Com o código abaixo, consigo localizar no mapa o endereço digitado no TxtEndereço.text, mas o código não coloca a Marca sobre o lugar. O QUE ESTÃ FALTANDO??
Dim key As String = ConfigurationManager.AppSettings.Get([Ô]googlemaps.subgurim.net[Ô])
Dim gMap1 As New GMap()
gMap1.getGeoCodeRequest(TxtEndereço.Text, New GLatLngBounds(New GLatLng(40, 10), New GLatLng(50, 20)))
Dim GeoCode As New GeoCode
Dim sMapKey As String = ConfigurationManager.AppSettings([Ô]googlemaps.subgurim.net[Ô])
GeoCode = GMap.geoCodeRequest(TxtEndereço.Text, key, New GLatLngBounds(New GLatLng(40, 10), New GLatLng(50, 20)))
Não há a menor necessidade de se utilizar uma nada confiável DLL de terceiros, quando se pode usar a API do google diretamente sem nenhum custo via http
Talvez você tenha razão Kerplunk. Mas o fato é que, depois de 15 anos programando em VB, tenho muita dificuldade em me adptar com asp.net e java script. Se vocês puderem me ajudar...
Tenho o seguinte código :
E preciso inserir marcas personalizadas nesse mapa com o seguinte código:
Tentei chamar essa função de um botão no code behind com o seguinte código:
Mas não funciona.
Pode me ajudar???
Tenho o seguinte código :
<script type=[Ô]text/javascript[Ô] src=[Ô]http://maps.googleapis.com/maps/api/js?sensor=false[Ô]></script>
<script type=[Ô]text/javascript[Ô]>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById([Ô]dvMap[Ô]), mapOptions);
google.maps.event.addListener(marker, [Ô]click[Ô], function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, LatLng);
});
});
} else {
alert([ô]Geo Location feature is not supported in this browser.[ô]);
}
</script>
E preciso inserir marcas personalizadas nesse mapa com o seguinte código:
<script type=[Ô]text/javascript[Ô]>
function InserirMarca() {
var map = new google.maps.Map(document.getElementById([Ô]dvMap[Ô]), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: [Ô]<div style = [ô]height:60px;width:200px[ô]><b>Your location:</b><br />Latitude: [Ô] + p.coords.latitude + [Ô]<br />Longitude: [Ô] + p.coords.longitude
});
}
</script> Tentei chamar essa função de um botão no code behind com o seguinte código:
Button1.Attributes.Add([Ô]onclick[Ô], [Ô]InserirMarca();[Ô]) Mas não funciona.
Pode me ajudar???
Ok, vamos por partes então. Observe esse exemplo
A primeira parte, cria as variáveis:
Observe que existe uma chamada [Ô]myOptions[Ô] que são as opções do mapa, ou seja, configurações de como o mapa deve ser apresentado, nesse caso, definindo o zoom, em que coordenadas deve ser centralizado e o tipo de mapa(se satélite ou simples).
Sem seguida, passa essas opções à variável mapa que é um método de maps, do framework do google(a variável map = new google....)
Na parte seguinte que é esta:
Ele estabelece os limites do mapa, as coordenadas máximas de latitude e longitude para continuar o exemplo. Na parte seguinte que é esta:
Na parte seguinte, ele cria um loop de 10 iterações criando pins aleatórios no mapa, usando os limites estabelecidos na parte acima. Esta parte:
Na parte seguinte, ele estabelece que Ãcones são apresentados em cada ponto randômico criado acima, de acordo com sua elevação(elevação geográfica de acordo com o nÃvel do mar). Ele apresenta dois Ãcones que são bem visÃveis pelos seus endereços(http://google-maps-icons.googlecode.com/files/sailboat-tourism.png e http://google-maps-icons.googlecode.com/files/red?.png, onde o ponto de interrogação se refere ao número especÃfico do Ãcone).
Note bem que para poder usar esse código na sua aplicação, você vai precisar referenciar o JQuery e a API do google maps, que é http://maps.google.com/maps/api/js?sensor=false&.js
Para referenciar ambas, acrescente ao seu HTML as seguintes linhas:
O código completo HTML está em anexo. Repare que a cada movimentação do mapa, os pinos são novamente relocados em posições randômicas, isso ocorre devido ao [Ô]listener[Ô] que é a chave principal de todo o código acima(chave principal no sentido de que tudo está contido dentro dela). Ela ocorre toda vez que o mapa entrar em estado [Ô]idle[Ô], ou seja, quando não houver nenhuma interação com ele, por isso que a cada movimentação dele, os pontos mudam.
Se quiser, existem muitos exemplos na web de como fazer isso, como este aqui, que é bem mais simples de se entender.
Qualquer dúvida, estamos aÃ!
A primeira parte, cria as variáveis:
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: [ô]terrain[ô]
};
map = new google.maps.Map($([ô]#map[ô])[0], myOptions);
var markers = [];
Observe que existe uma chamada [Ô]myOptions[Ô] que são as opções do mapa, ou seja, configurações de como o mapa deve ser apresentado, nesse caso, definindo o zoom, em que coordenadas deve ser centralizado e o tipo de mapa(se satélite ou simples).
Sem seguida, passa essas opções à variável mapa que é um método de maps, do framework do google(a variável map = new google....)
Na parte seguinte que é esta:
var boundBox = map.getBounds();
var southWest = boundBox.getSouthWest();
var northEast = boundBox.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
Ele estabelece os limites do mapa, as coordenadas máximas de latitude e longitude para continuar o exemplo. Na parte seguinte que é esta:
var boundBox = map.getBounds();
var southWest = boundBox.getSouthWest();
var northEast = boundBox.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
Na parte seguinte, ele cria um loop de 10 iterações criando pins aleatórios no mapa, usando os limites estabelecidos na parte acima. Esta parte:
var locations = [];
for (var j = 0; j < 10; j++)
{
var location = new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()
);
locations.push(location);
}
Na parte seguinte, ele estabelece que Ãcones são apresentados em cada ponto randômico criado acima, de acordo com sua elevação(elevação geográfica de acordo com o nÃvel do mar). Ele apresenta dois Ãcones que são bem visÃveis pelos seus endereços(http://google-maps-icons.googlecode.com/files/sailboat-tourism.png e http://google-maps-icons.googlecode.com/files/red?.png, onde o ponto de interrogação se refere ao número especÃfico do Ãcone).
Note bem que para poder usar esse código na sua aplicação, você vai precisar referenciar o JQuery e a API do google maps, que é http://maps.google.com/maps/api/js?sensor=false&.js
Para referenciar ambas, acrescente ao seu HTML as seguintes linhas:
<script type=[ô]text/javascript[ô] src=[ô]http://code.jquery.com/jquery-1.4.2.js[ô]></script>
<script type=[ô]text/javascript[ô] src=[Ô]http://maps.google.com/maps/api/js?sensor=false&.js[Ô]></script>
O código completo HTML está em anexo. Repare que a cada movimentação do mapa, os pinos são novamente relocados em posições randômicas, isso ocorre devido ao [Ô]listener[Ô] que é a chave principal de todo o código acima(chave principal no sentido de que tudo está contido dentro dela). Ela ocorre toda vez que o mapa entrar em estado [Ô]idle[Ô], ou seja, quando não houver nenhuma interação com ele, por isso que a cada movimentação dele, os pontos mudam.
Se quiser, existem muitos exemplos na web de como fazer isso, como este aqui, que é bem mais simples de se entender.
Qualquer dúvida, estamos aÃ!
KERPLUNK Primeiro, quero pedir desculpas pela demora na resposta. Estive meio fora do ar com gripe e só agora retornei. Segundo e com certeza mais importante, quero agradecer profundamente sua atenção e seu carinho em me ajudar.
Consegui o que queria com o seguinte código abaixo, mas não estou conseguindo inserir informações (infowindow) nas marcas:
Observe que eu tentei com o Literal2 e com o Page.ClientScript.RegisterStartupScript
Já fiz uns 1000 testes alterando isso e aquilo e nada funcionou. O que está errado com meu código???
Consegui o que queria com o seguinte código abaixo, mas não estou conseguindo inserir informações (infowindow) nas marcas:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim markers As String = [Ô][Ô]
markers = GetMarkers()
Literal1.Text = [Ô]<script type=[ô]text/javascript[ô]>[Ô] + _
[Ô]function initialize() {[Ô] + _
[Ô]var mapOptions = {[Ô] + _
[Ô]center: new google.maps.LatLng(-20.418677, -42.910161),[Ô] + _
[Ô]zoom: 20,[Ô] + _
[Ô]mapTypeId : google.maps.MapTypeId.ROADMAP[Ô] + _
[Ô]};[Ô] + _
[Ô]var myMap = new google.maps.Map(document.getElementById([ô]mapArea[ô]), mapOptions);[Ô] + _
markers + _
[Ô]}[Ô] + _
[Ô]</script>[Ô]
Literal2.Text = [Ô]<script type=[ô]text/javascript[ô]> var infowindow = new google.maps.InfoWindow(); infowindow.setContent([ô]Texto de teste[ô]); google.maps.event.addListener(marker3, [ô]click[ô], function () {infowindow.open(myMap, marker3)}); </script>[Ô]
End Sub
Protected Function GetMarkers() As String
Dim markers As String = [Ô][Ô]
Dim Texto As String
Dim Con As String = [Ô]minhas configurações...l[Ô]
Dim SSQL As String
Dim conn As MySqlConnection = New MySqlConnection(Con)
SSQL = [Ô]SELECT * FROM Dados[Ô]
conn.Open()
Dim cmd As MySqlCommand = New MySqlCommand(SSQL, conn)
[ô]cmd.ExecuteReader()
Dim reader = cmd.ExecuteReader()
[ô]conn.Dispose()
[ô]DETERMINA O ENDEREÇO DA RESIDÊNCIA
markers = [Ô]var marker1= new google.maps.Marker({[Ô] + _
[Ô]position: new google.maps.LatLng(-20.418640, -42.910120),[Ô] + _
[Ô]map: myMap,[Ô] + _
[Ô]title:[ô]Cidade[ô], [Ô] & _
[Ô]icon: [ô]endereço tal[ô],[Ô] & _
[Ô]size: new google.maps.Size(5, 5), [Ô] & _
[Ô]});[Ô]
Texto = [Ô]Aqui vai o texto[Ô]
Dim myScript As String = [Ô]var infowindow = new google.maps.InfoWindow(); infowindow.setContent([Ô] & [Ô]Texto de teste[Ô] & [Ô]); google.maps.event.addListener(marker2, [ô]click[ô], function () {infowindow.open(myMap, marker2)});[Ô]
Page.ClientScript.RegisterStartupScript(Me.GetType, [Ô][Ô], myScript, True)
Dim i As Integer = 1
While reader.Read
i = i + 1
markers = markers + [Ô]var marker[Ô] + i.ToString() + [Ô]= new google.maps.Marker({[Ô] + _
[Ô]position: new google.maps.LatLng( [Ô] + reader([Ô]Latitude[Ô]).ToString() + [Ô], [Ô] + _
reader([Ô]Longitude[Ô]).ToString() + [Ô]),[Ô] + _
[Ô]map: myMap,[Ô] + _
[Ô]title:[ô][Ô] + reader([Ô]Cidade[Ô]).ToString() + [Ô][ô], [Ô] & _
[Ô]icon: [ô]endereço tal[ô], [Ô] & _
[Ô]size: new google.maps.Size(5, 5)[Ô] & _
[Ô]});[Ô]
End While
conn.Close()
Return markers
End Function Observe que eu tentei com o Literal2 e com o Page.ClientScript.RegisterStartupScript
Literal2.Text = [Ô]<script type=[ô]text/javascript[ô]> var infowindow = new google.maps.InfoWindow(); infowindow.setContent([ô]Texto de teste[ô]); google.maps.event.addListener(marker3, [ô]click[ô], function () {infowindow.open(myMap, marker3)}); </script>[Ô] Dim myScript As String = [Ô]var infowindow = new google.maps.InfoWindow(); infowindow.setContent([Ô] & [Ô]Texto de teste[Ô] & [Ô]); google.maps.event.addListener(marker2, [ô]click[ô], function () {infowindow.open(myMap, marker2)});[Ô]
Page.ClientScript.RegisterStartupScript(Me.GetType, [Ô][Ô], myScript, True)
Já fiz uns 1000 testes alterando isso e aquilo e nada funcionou. O que está errado com meu código???
Consegui!!! Simplesmente complementei o código anterior ao invés de criar outro para inserir as informações. Ou seja, ao invés de fazer assim:
Liguei os dois códigos assim:
E eu só consegui entender isso depois do link que você me sugeriu no comentário anterior.
MUITO OBRIGADO!!!
markers = [Ô]var marker1= new google.maps.Marker({[Ô] + _
[Ô]position: new google.maps.LatLng(-20.418640, -42.910120),[Ô] + _
[Ô]map: myMap,[Ô] + _
[Ô]title:[ô]Cidade[ô], [Ô] & _
[Ô]icon: [ô]endereço tal[ô],[Ô] & _
[Ô]size: new google.maps.Size(5, 5), [Ô] & _
[Ô]});[Ô]
Texto = [Ô]Aqui vai o texto[Ô]
Dim myScript As String = [Ô]var infowindow = new google.maps.InfoWindow(); infowindow.setContent([Ô] & [Ô]Texto de teste[Ô] & [Ô]); google.maps.event.addListener(marker2, [ô]click[ô], function () {infowindow.open(myMap, marker2)});[Ô]
Page.ClientScript.RegisterStartupScript(Me.GetType, [Ô][Ô], myScript, True)
Liguei os dois códigos assim:
markers = [Ô]var marker1= new google.maps.Marker({[Ô] + _
[Ô]position: new google.maps.LatLng(-20.418640, -42.910120),[Ô] + _
[Ô]map: myMap,[Ô] + _
[Ô]title:[ô]Cidade[ô], [Ô] & _
[Ô]icon: [ô]endereço tal[ô],[Ô] & _
[Ô]size: new google.maps.Size(5, 5), [Ô] & _
[Ô]});[Ô] + _
[Ô]var infotext = [ô][Ô] & Texto & [Ô][ô];[Ô] + _
[Ô]var infowindow1 = new google.maps.InfoWindow();[Ô] + _
[Ô]infowindow1.setContent(infotext);[Ô] + _
[Ô]google.maps.event.addListener(marker1, [ô]click[ô], function () {[Ô] + _
[Ô]infowindow1.open(myMap, marker1);[Ô] + _
[Ô]});[Ô] E eu só consegui entender isso depois do link que você me sugeriu no comentário anterior.
MUITO OBRIGADO!!!
Tópico encerrado , respostas não são mais permitidas