Mostrar localização mapa com selects

[tiko165]

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??

[Devexz]

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>

[tiko165]

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);
}

[HappyHippyHippo]

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

[tiko165]

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.

[tiko165]

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

[Devexz]

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

[tiko165]

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 April 8, 2014 by tiko165