Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 383
Sexo: Masculino
Localização: criciuma

Google Maps API

17-03-2015 12:09

bom dia, estou tentando fazer um script utilizando a API do Google Maps

tenho varios pontos que vem de um XML e queria mostrar no mapa. até ai OK. esta funcionando.
gostaria de centralizar o mapa na posicao do usuario. tambem funciona

o problema eh que nao consigo juntar essas duas funcoes.
poderiam ajudar?

segue o script. adicionei a funcao getLocation() que pega a latitude e a longitude da posicao atual do usuario. criei o botao Mostra posicao que vai mostrar esses dados.

na outra funcao, tem map.setCenter(new GLatLng( 43.907787,-79.359741), 9); esses dois numeros sao o centro do mapa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>   <head>     <title>Google Maps</title>     <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyB7EO3Ud6JRjhDr-EtmhSIsQa4H20G1KAg" type="text/javascript"></script>   </head>   <body onunload="GUnload()">       <!-- you can use tables or divs for the overall layout -->     <table border=1>       <tr>         <td>            <div id="map" style="width: 1050px; height: 550px"></div>         </td>         <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">            <div id="side_bar"></div>         </td>       </tr>     </table>       <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Mostra Posicao</button> <script> var x=document.getElementById("demo"); function getLocation()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition);     }   else{x.innerHTML="Geolocation is not supported by this browser.";}   } function showPosition(position)   {   x.innerHTML="Latitude: " + position.coords.latitude +   "<br>Longitude: " + position.coords.longitude;          } </script>           <script type="text/javascript">     //<![CDATA[       if (GBrowserIsCompatible()) {       // this variable will collect the html which will eventualkly be placed in the side_bar       var side_bar_html = "";           // arrays to hold copies of the markers used by the side_bar       // because the function closure trick doesnt work there       var gmarkers = [];     var gicons = [];       gicons["marker"] = new GIcon(G_DEFAULT_ICON, "marker.png");                           // A function to create the marker and set up the event window       function createMarker(point,name,html,icontype) {         var marker = new GMarker(point, gicons[icontype]);         GEvent.addListener(marker, "click", function() {           marker.openInfoWindowHtml(html);         });         // save the info we need to use later for the side_bar         gmarkers.push(marker);         // add a line to the side_bar html         side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';         return marker;       }           // This function picks up the click and opens the corresponding info window       function myclick(i) {         GEvent.trigger(gmarkers[i], "click");       }           // create the map       var map = new GMap2(document.getElementById("map"));       map.addControl(new GLargeMapControl());       map.addControl(new GMapTypeControl());       map.setCenter(new GLatLng( 43.907787,-79.359741), 9);           // Read the data from example.xml       GDownloadUrl("geraxml.php", function(doc) {         var xmlDoc = GXml.parse(doc);         var markers = xmlDoc.documentElement.getElementsByTagName("marker");                   for (var i = 0; i < markers.length; i++) {           // obtain the attribues of each marker           var lat = parseFloat(markers[i].getAttribute("lat"));           var lng = parseFloat(markers[i].getAttribute("lng"));           var point = new GLatLng(lat,lng);           var html = markers[i].getAttribute("html");           var label = markers[i].getAttribute("label");           var icontype = markers[i].getAttribute("icontype");             // create the marker           var marker = createMarker(point,label,html,icontype);           map.addOverlay(marker);         }         // put the assembled side_bar_html contents into the side_bar div         document.getElementById("side_bar").innerHTML = side_bar_html;       });     }       else {       alert("Sorry, the Google Maps API is not compatible with this browser");     }       //]]>     </script>   </body>   </html> 

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17547
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Google Maps API

17-03-2015 13:20

Pelo que entendi você precisa que ao clicar no Mostra Posicao, além de exibir o valor movimente o mapa até a posição, é isso?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 383
Sexo: Masculino
Localização: criciuma

Google Maps API

17-03-2015 14:09

na verdade eu queria iniciar o mapa na posicao atual do usuario
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17547
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Google Maps API

17-03-2015 15:55

Você pode tentar o seguinte, ao invés de carregar a localização no clique, chama no onload

<button onload="getLocation()">

Na função getLocation após

  x.innerHTML="Latitude: " + position.coords.latitude +   "<br>Longitude: " + position.coords.longitude;

Você adiciona

map.setCenter(new GLatLng( position.coords.latitude,position.coords.longitude), 9);

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 383
Sexo: Masculino
Localização: criciuma

Google Maps API

17-03-2015 16:04

testei de outro jeito e deu certo. ficou assim. peguei a funcao e coloquei la dentro onde seta a posicao

function showPosition(position) {                           map.setCenter(new GLatLng( position.coords.latitude,position.coords.longitude), 9);                    }

obrigado
0

Quem está online

Usuários navegando neste fórum: Bing [Bot]