Form ZIP CODE apresentando no google maps

NapsterZ · April 7, 2014

Boas,

Pretendo fazer um form onde o utilizador insira o cód postal e depois de carregar no botão apresente uma marker no mapa do respetivo cód postal.

O código que já tenho feito é este:

meta charset="utf-8";>
<html>
 <head>
   <style>
   body { font-family: Helvetica; }
   .map-content h3 { margin: 0; padding: 5px 0 0 0; }

   </style>
<form align="center" method="post">
<label>Código Postal: <label>

<input name="cod" type="text" maxlength="4" size="4">
<label>-<label>
<input name="ter" type="text" maxlength="3" size="1">

<input type="submit" value="Procurar" >

</form>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script>
 // Set the Map variable
   var map;

 function initialize() {
	    var myOptions = {
	    zoom: 6,
	    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var all = [
	    ["Sede PcMedic", "Rua dos Combatentes da Grande Guerra", "Covilhã","Covilhã", "6200-076", "40.282357", "-7.504011"],
	    ["Sucursal PcMedic", "Alameda dos Oceanos", "Lisboa", "Lisboa", "1990-230", "38.775803", "-9.094930"],
  ["Laboratório PcMedic Oriente", "Alameda dos Oceanos, Lote 4.07.01", "Lisboa", "Lisboa", "1990-207", "38.758086", "-9.096396"],
  ["Laboratório PcMedic Saldanha", "Centro Comercial Saldanha Residence <br> Avenida Fontes Pereira de Melo 42E", "Lisboa", "Lisboa", "1050-250", "38.731972", "-9.145968"],
  ["Laboratório PcMedic Alfragide", "Centro Comercial Alegro <br> Av. dos Cavaleiros, 60", "Lisboa", "Lisboa", "2790-045", "38.727592", "-9.218036"],
  ["Laboratório PcMedic Bela Vista", "Avenida Santo Condestável", "Lisboa", "Lisboa", "1900-806", "38.74882", "-9.117335"],
  ["Laboratório PcMedic Rio de Mouro", "Fitares Shopping <br> Estrada marquês de Pombal", "Rio de Mouro", "Lisboa", "2635-304", "38.785464", "-9.316967"],
  ["Laboratório PcMedic Queluz", "Rua Dos Lusíadas, 5 Loja C", "Queluz", "Lisboa", "2745-155", "38.75692", "-9.252916"],
  ["Laboratório PcMedic Terrugem", "Av. 29 de Agosto, 45", "Terrugem", "Terrugem", "2705-866", "38.848005", "-9.378419"],
  ["Laboratório PcMedic Loures", "Estrada Nacional, 250 Loja.Esq", "Loures", "Lisboa", "2670-325", "38.838657", "-9.157606"],
  ["Laboratório PcMedic Odivelas", "Av. Almirante Gago Coutinho, Loja 1", "Odivelas", "Lisboa", "2620-142", "38.796348", "-9.163156"],
  ["Laboratório PcMedic Porto", "Av. Almirante Gago Coutinho, Loja 1", "Porto", "Porto", "4200-282", "41.175734", "-8.588107"],
  ["Laboratório PcMedic Coimbra", "Rua Vale das Flores, Loja 17", "Coimbra", "Coimbra", "3030-486", "40.194094", "-8.410222"],
  ["Laboratório PcMedic Marinha Grande", "Avenida José Gregório, 169 Loja D", "Marinha Grande", "Coimbra", "2430-275", "39.755166", "-8.934084"],
  ["Laboratório PcMedic Barreiro", "Fórum Barreiro <br> Rua Stara Zagora, 1", "Barreiro", "Barreiro", "2830-364", "38.661906", "-9.07313"],
  ["Laboratório PcMedic Silves", "Rua Serpa Pinto, 39 Loja D", "Silves", "Silves", "2830-364", "37.189241", "-8.445002"],
  ["Laboratório PcMedic Fátima", "Rua Central, 131 R/c", "Santa Catarina da Serra", "Fátima", "2495-122", "39.65952", "-8.688584"],
   ];
    var infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);


 // Set the center of the map
    var pos = new google.maps.LatLng(39.682222, -8.060945);
    map.setCenter(pos);


 function infoCallback(infowindow, marker) {
	    return function() {
	    infowindow.open(map, marker);
    };
  }
 var image = {
 url: 'imagens/computers.png',
  };


  function setMarkers(map, all) {
   for (var i in all) {		 
	    var name  = all[i][0];
	    var address = all[i][1];
	    var city  = all[i][2];
	    var state  = all[i][3];
	    var zip  = all[i][4];
	    var lat  = all[i][5];
	    var lng  = all[i][6];
	    var latlngset;
  var ter;

  latlngset = new google.maps.LatLng(lat, lng);

  var marker = new google.maps.Marker({ 
		  map: map,  title: name,  position: latlngset, icon: image
	    });
	    var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + zip + ', ' + city + '<br /><a href="http://maps.google.com/?daddr='
+ address + ' ' + city + ', ' + state + ' ' + zip + '"</a></div>';	
	    var infowindow = new google.maps.InfoWindow();
		  infowindow.setContent(content);
		  google.maps.event.addListener(
		    marker,
		    'click',
		    infoCallback(infowindow, marker)
		  );
	  }
    }  
    // Set all markers in the all variable
    setMarkers(map, all);
  };
  // Initializes the Google Map
  google.maps.event.addDomListener(window, 'load', initialize);
   </script>
 </head>
 <body>
 <table align="center">
 <tr>
 <td>
 <br>
 <br>
   <div id="map_canvas" style="height: 500px; width: 600px;"></div>
 </td>
 </tr>
 </table>
 </body>
</html>

Se me pudessem ajudar agradecia 🙂

Obrigado

Edit: tanto faz ser em php ou em javascript e se possivel como fazer aparecer uma marker diferente daquela que está no mapa a definir as lojas.

Devexz · April 7, 2014

já vericaste se na api do maps tens a opção para pesquisar por códigos postais?

NapsterZ · April 9, 2014

Já mas nao consegui encontrar o que pretendia.

Sou novo em javascript e em google maps se me poderem dar umas lâmpadas da 100W agradecia 😛

Sign In

Form ZIP CODE apresentando no google maps

Recommended Posts

NapsterZ

Link to comment

Share on other sites

Devexz

Link to comment

Share on other sites

NapsterZ

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information