Mappa all'interno del sito con ricerca delle filiali

mimmomix77

Nuovo Utente
22 Mag 2015
7
0
0
Salve ragazzi, l'azienda dove lavoro, mi ha chiesto di trovare una soluzione per la ricerca delle loro filiali, in una pagina dedicata del sito web, in modo che ci sia una mappa, un modulo di ricerca (CAP, Località e distanza dalla località indicata) e poi un elenco delle filiali vicine al punto ricercato, tipo come sul sito della lidl, non so se posso pubblicare il loro link ... ci provo... :eek:
http://www.lidl.it/it/ricerca-filiale.htm esiste qualcosa di "veloce" che mi permetta di farlo, avendo già tutti gli indirizzi delle filiali?

Meglio utilizzare le API di Bing o di Google ? ... ma sono proprio necessarie?

Onestamente non vorrei andarmi ad impelagare in situazioni troppo complesse e cercare di risolvere la cosa nel minor tempo possibile...

Grazie mille a tutti. :byebye:
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, ti conviene utilizzare le api di google, il lavoro non è semplice come speri.
Dai un occhiata qui
Ti sposto nella sezione di javascript, più adatta alla tua richiesta
 

mimmomix77

Nuovo Utente
22 Mag 2015
7
0
0
Grazie, infatti sto cercando di capire ora come inserire un campo all'esterno della mappa dove inserire il CAP o la città e fare apparire sulla mappa i punti più vicino.

Ma i punti, ossia, le filiali, da dove le devo caricare? ... Mi rendo conto che la cosa non è affatto semplice... qualche piccolo aiutino? :)
 

mimmomix77

Nuovo Utente
22 Mag 2015
7
0
0
Con l'account Google ho creato anche la KEY ho pure importato gli indirizzi delle varie sedi su una Mappa, ma non riesco a farla visualizzare ... help...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Posta il codice o un esempio online che gli diamo un occhiata
 

mimmomix77

Nuovo Utente
22 Mag 2015
7
0
0
Allora, l'esempio che vorrei ricreare sul sito Web è questo oppure questo

Intanto sto vedendo gli esempi che mi hai consigliato, in particolare quello a questo link . Però non riesco a far visualizzare i "Punti" che ho importato all'interno della MyMaps di Google. C'è la voce "Incorpora nel tuo sito" ma è un Link completamente diverso e pur inserendolo non mi fa apparire la Mappa, ecco una mappa di esempio che ho creato: https://www.google.com/maps/d/embed?mid=z9HCNuRYKpc0.k2tufKNwuBsQ

Mamma mia che ingrippo :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
mmm, io volevo dare un occhiata al codice che hai scritto tu e cercare di capire perchè non ti funziona.
 

mimmomix77

Nuovo Utente
22 Mag 2015
7
0
0
Scusa... per il ritardo... incollo il Codice della Pagina:

Codice:
<!DOCTYPE html>
<html>
    <head>
    <title>Ricerca Punti</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
html, body, #map-canvas {
	margin: 0px;
	padding: 0px
}
</style>
    <style>
table {
	font-size: 12px;
}
#map-canvas {
	width: 600px;
	height:480px;
}
#listing {
	position: relative;
	width: 600px;
	height: 470px;
	overflow: auto;
	left: 442px;
	top: 0px;
	cursor: pointer;
	overflow-x: hidden;
}
#findhotels {
	text-align: right;
	width: 300px;
	font-size: 14px;
	padding: 4px;
	z-index: 5;
	background-color: #fff;
}
#locationField {
	width: 190px;
	height: 25px;
	z-index: 5;
	background-color: #fff;
}
#controls {
	position: absolute;
	left: 300px;
	width: 140px;
	top: 0px;
	z-index: 5;
	background-color: #fff;
}
#autocomplete {
	width: 100%;
}
#country {
	width: 100%;
}
.placeIcon {
	width: 20px;
	height: 34px;
	margin: 4px;
}
.hotelIcon {
	width: 24px;
	height: 24px;
}
#resultsTable {
	border-collapse: collapse;
	width: 240px;
}
#rating {
	font-size: 13px;
	font-family: Arial Unicode MS;
}
.iw_table_row {
	height: 18px;
}
.iw_attribute_name {
	font-weight: bold;
	text-align: right;
}
.iw_table_icon {
	text-align: right;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>

var map, places, infoWindow;
var markers = [];
var autocomplete;
var countryRestrict = { 'country': 'it' };
var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
var hostnameRegexp = new RegExp('^https?://.+?/');

var countries = {
  'it': {
    center: new google.maps.LatLng(41.9, 12.6),
    zoom: 6
  }
};

function initialize() {
  var myOptions = {
    zoom: countries['it'].zoom,
    center: countries['it'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

  infoWindow = new google.maps.InfoWindow({
      content: document.getElementById('info-content')
      });
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      {
        types: ['(cities)'],
        componentRestrictions: countryRestrict
      });
  places = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);

  google.maps.event.addDomListener(document.getElementById('country'), 'change',
      setAutocompleteCountry);
}


function onPlaceChanged() {
  var place = autocomplete.getPlace();
  if (place.geometry) {
    map.panTo(place.geometry.location);
    map.setZoom(15);
    search();
  } else {
    document.getElementById('autocomplete').placeholder = 'Inserisci una località';
  }

}

function search() {
  var search = {
    bounds: map.getBounds(),
    types: ['lodging'] /** IN QUESTO MODO RICERCA GLI HOTEL ... IO DOVREI CERCARE I PUNTI DELLA MIA MAPPA... ?!?!??! **/
  };

  places.nearbySearch(search, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      clearResults();
      clearMarkers();
	  
      for (var i = 0; i < results.length; i++) {
        var markerLetter = String.fromCharCode('1'.charCodeAt(0) + i);
        var markerIcon = MARKER_PATH + markerLetter + '.png';
		
        markers[i] = new google.maps.Marker({
          position: results[i].geometry.location,
          animation: google.maps.Animation.DROP,
          icon: markerIcon
        });
		
        markers[i].placeResult = results[i];
        google.maps.event.addListener(markers[i], 'click', showInfoWindow);
        setTimeout(dropMarker(i), i * 100);
        addResult(results[i], i);
      }
    }
  });
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    if (markers[i]) {
      markers[i].setMap(null);
    }
  }
  markers = [];
}


function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter(new google.maps.LatLng(15, 0));
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({ 'it': country });
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}


function dropMarker(i) {
  return function() {
    markers[i].setMap(map);
  };
}

function addResult(result, i) {
  var results = document.getElementById('results');
  var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
  var markerIcon = MARKER_PATH + markerLetter + '.png';

  var tr = document.createElement('tr');
  tr.style.backgroundColor = (i % 2 == 0 ? '#F0F0F0' : '#FFFFFF');
  tr.onclick = function() {
    google.maps.event.trigger(markers[i], 'click');
  };

  var iconTd = document.createElement('td');
  var nameTd = document.createElement('td');
  var icon = document.createElement('img');
  icon.src = markerIcon;
  icon.setAttribute('class', 'placeIcon');
  icon.setAttribute('className', 'placeIcon');
  var name = document.createTextNode(result.name);
  iconTd.appendChild(icon);
  nameTd.appendChild(name);
  tr.appendChild(iconTd);
  tr.appendChild(nameTd);
  results.appendChild(tr);
}

function clearResults() {
  var results = document.getElementById('results');
  while (results.childNodes[0]) {
    results.removeChild(results.childNodes[0]);
  }
}

function showInfoWindow() {
  var marker = this;
  places.getDetails({placeId: marker.placeResult.place_id},
      function(place, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          return;
        }
        infoWindow.open(map, marker);
        buildIWContent(place);
      });
}


function buildIWContent(place) {
  document.getElementById('iw-icon').innerHTML = '<img class="hotelIcon" ' +
      'src="' + place.icon + '"/>';
  document.getElementById('iw-url').innerHTML = '<b><a href="' + place.url +
      '">' + place.name + '</a></b>';
  document.getElementById('iw-address').textContent = place.vicinity;

  if (place.formatted_phone_number) {
    document.getElementById('iw-phone-row').style.display = '';
    document.getElementById('iw-phone').textContent =
        place.formatted_phone_number;
  } else {
    document.getElementById('iw-phone-row').style.display = 'none';
  }


  if (place.rating) {
    var ratingHtml = '';
    for (var i = 0; i < 5; i++) {
      if (place.rating < (i + 0.5)) {
        ratingHtml += '✩';
      } else {
        ratingHtml += '✭';
      }
    document.getElementById('iw-rating-row').style.display = '';
    document.getElementById('iw-rating').innerHTML = ratingHtml;
    }
  } else {
    document.getElementById('iw-rating-row').style.display = 'none';
  }


  if (place.website) {
    var fullUrl = place.website;
    var website = hostnameRegexp.exec(place.website);
    if (website == null) {
      website = 'http://' + place.website + '/';
      fullUrl = website;
    }
    document.getElementById('iw-website-row').style.display = '';
    document.getElementById('iw-website').textContent = website;
  } else {
    document.getElementById('iw-website-row').style.display = 'none';
  }
}

    </script>
    </head>

    <body style="margin:0px; padding:0px;" onload="initialize()">
    <center>
      <div id="findhotels"> Trova l'Agenzia più vicita alla tua Città: </div>
      <div id="locationField">
        <input id="autocomplete" placeholder="Inserisci una località" type="text" />
      </div>
      <div id="controls">
        <input id="country" value="it" type="hidden" >
      </div>
      <div id="map-canvas"></div>
      <div id="listing">
        <table id="resultsTable">
          <tbody id="results">
          </tbody>
        </table>
      </div>
      <div id="info-content">
        <table>
          <tr id="iw-url-row" class="iw_table_row">
            <td id="iw-icon" class="iw_table_icon"></td>
            <td id="iw-url"></td>
          </tr>
          <tr id="iw-address-row" class="iw_table_row">
            <td class="iw_attribute_name">Address:</td>
            <td id="iw-address"></td>
          </tr>
          <tr id="iw-phone-row" class="iw_table_row">
            <td class="iw_attribute_name">Telephone:</td>
            <td id="iw-phone"></td>
          </tr>
          <tr id="iw-rating-row" class="iw_table_row">
            <td class="iw_attribute_name">Rating:</td>
            <td id="iw-rating"></td>
          </tr>
          <tr id="iw-website-row" class="iw_table_row">
            <td class="iw_attribute_name">Website:</td>
            <td id="iw-website"></td>
          </tr>
        </table>
      </div>
    </center>
</body>
</html>
Questi invece i punti sulla mappa... https://www.google.com/maps/d/embed?...0.k2tufKNwuBsQ che vorrei far visualizzare e ricercare.

Grazie ancora.
 
Ultima modifica: