Mappa all'interno del sito con ricerca delle filiali

mimmomix77 · 22 Mag 2015

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

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:

mimmomix77 · 26 Mag 2015

.... nessuno riesce a darmi qualche suggerimento ? :dipser:

criric · 26 Mag 2015

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 · 27 Mag 2015

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 · 27 Mag 2015

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 · 28 Mag 2015

Posta il codice o un esempio online che gli diamo un occhiata

mimmomix77 · 29 Mag 2015

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 · 29 Mag 2015

mmm, io volevo dare un occhiata al codice che hai scritto tu e cercare di capire perchè non ti funziona.

mimmomix77 · 10 Lug 2015

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.

Cerca

Cerca

Mappa all'interno del sito con ricerca delle filiali

mimmomix77

Nuovo Utente

mimmomix77

Nuovo Utente

criric

Super Moderatore

mimmomix77

Nuovo Utente

mimmomix77

Nuovo Utente

criric

Super Moderatore

mimmomix77

Nuovo Utente

criric

Super Moderatore

mimmomix77

Nuovo Utente

Discussioni simili