Jump to content

Form ZIP CODE apresentando no google maps


NapsterZ
 Share

Recommended Posts

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.

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.