Jump to content

Mostrar localização mapa com selects


tiko165
 Share

Recommended Posts

Estou a desenvolver uma aplicação para mostrar num pagina os mapa as localizações que tenho em 3 selects, de cidades, distritos e freguesias.

Num dos selects tenho por exemplo o seguinte num dos selects:

 <select name="distrito">
  <option value=""> ( Distrito ) </option>
  <option id="40.640366, -8.654662" value="Aveiro">Aveiro</option>
  <option id="38.721264, -9.139089" value="Lisboa">Lisboa</option>
  <option id="41.154453, -8.614729" value="Porto">Porto</option>
  <option id="37.777055, -25.484396" value="Açores">Açores</option>
 </select>

E obtenho do código em JS da Google dos mapas, onde nesse código, necessita da Latitude e Longitude, mas o que pretendo é que esse código reconheça qual a Lat e Lon conforme escolhido nos selects acima.

Como posso adequar??

collectioneuro300px.png
Link to comment
Share on other sites

Algo deste género:

<select name="distrito" onchange="obterCoordenadas(this)">
  <option value=""> ( Distrito ) </option>
  <option id="40.640366, -8.654662" value="Aveiro">Aveiro</option>
  <option id="38.721264, -9.139089" value="Lisboa">Lisboa</option>
  <option id="41.154453, -8.614729" value="Porto">Porto</option>
  <option id="37.777055, -25.484396" value="Açores">Açores</option>
</select>
<script>
function obterCoordenadas(sel) {

 var  coordenada = sel.value;
 //depois passas a coordenada ao teu script que gera o maps.
}
</script>

Contador de calorias: caloriaspordia.com

Link to comment
Share on other sites

Algo deste género:

<select name="distrito" onchange="obterCoordenadas(this)">
  <option value=""> ( Distrito ) </option>
  <option id="40.640366, -8.654662" value="Aveiro">Aveiro</option>
  <option id="38.721264, -9.139089" value="Lisboa">Lisboa</option>
  <option id="41.154453, -8.614729" value="Porto">Porto</option>
  <option id="37.777055, -25.484396" value="Açores">Açores</option>
</select>
<script>
function obterCoordenadas(sel) {

 var  coordenada = sel.value;
 //depois passas a coordenada ao teu script que gera o maps.
}
</script>

Mas como é que adequo ao codigo da Google?

Desta linha, e tambem se possivel, do zoom??

function initialize()
{
var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
var map=new google.maps.Map(document.getElementById("googleMap")
 ,mapProp);
}
collectioneuro300px.png
Link to comment
Share on other sites

o que podes fazer é usar o geocoder da API, dessa forma não necessitas de "decorar" as longuitudes/latitudes dos locais :

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

Mas o que pretendo é ao seleccionar 3 select box (Distrito, ou Distrito e Cidades, ou Distritos Cidades e Freguesias), o codigo fornecido ler automaticamente qual a localização, e mostrar no mapa assim que as select box forem escolhidas.

collectioneuro300px.png
Link to comment
Share on other sites

Mas o que pretendo é ao seleccionar 3 select box (Distrito, ou Distrito e Cidades, ou Distritos Cidades e Freguesias), o codigo fornecido ler automaticamente qual a localização, e mostrar no mapa assim que as select box forem escolhidas.

O que pretendo é algo identico a isto, so que contem mais duas select boxs, e é só para as cidades Portuguesas.

http://www.geocodezip.com/zoom2countrySelectList.html

collectioneuro300px.png
Link to comment
Share on other sites

mostra-la o código que tens do google...

var myCenter=new google.maps.LatLng(38.722000, -9.139433);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:13,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
 position:myCenter,
 });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
Edited by tiko165
collectioneuro300px.png
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.