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:
Discussioni simili
Autore Titolo Forum Risposte Data
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
O Mappa Interattiva PHP 3
A [Javascript] Marker personalizzati su mappa leaflet Javascript 0
C [PHP] Punto su mappa PHP 0
J [Wordpress] Mappa WordPress 2
M [Javascript] Visualizzazione mappa Javascript 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
Trapano [PHP] Mappa con gli indirizzi PHP 3
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
S [Javascript] Creare mappa per ogni utente Javascript 5
felino [Google MyBusiness] Maker non presente durante l'esplorazione della mappa Social Media Marketing 3
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
L Array multidimensionale mappa browsergame PHP 1
L Overlapping marker mappa google Javascript 0
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
E realizzare una mappa personale e responsive HTML e CSS 6
G Mappa Javascript Presentati al Forum 0
L Problema Inserimento Azioni Su mappa vettoriale Javascript 0
M Mappa immagine...vi prego è urgente, devo farlo quanto prima HTML e CSS 5
F zoom jquery mappa jQuery 1
J Mappa che visualizza daove sei PHP 7
F mappa jquery con effetto hover + fancybox Javascript 1
L Problemi a interagire con la mappa sul mio sito jQuery 1
felino Plugin per Mappa del sito WordPress 5
G Scaricare kml da una mappa incorporata in un sito web HTML e CSS 5
U [javascript] visualizzare marker su mappa di google Javascript 10
J Mappa con dati da db PHP 0
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
M Mappa immagine con elenco di link reciproci Javascript 0
P Popolare un Database da una mappa di google map PHP 7
P Mostrare punti interesse du una mappa di google maps Javascript 1
M Guida su come inserire la mappa di Goggle con Jumi Joomla 1
M Creare mappa immagine interattiva con dati forniti da database PHP 0
A creare una mappa del sito in frame HTML e CSS 0
unkus_nob marker dinamici in mappa google Javascript 3
M mappa generata da librerie gd modificabile tramite form PHP 51
M Mappa "interattiva" di isole per browsergame Javascript 7
emanuelevt mappa interattiva - problema jQuery 1
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
V Mappa di Google su explorer funziona, su CHROME e FIREFOX NO! Javascript 1
A mappa del sito nascosta HTML e CSS 6
G creare mappa + legenda Webdesign e Grafica 13
voldemort Mappa con jQuery jQuery 0
M Gestione di una mappa PHP 3
E Visualizzare mappa al passaggio del mouse Javascript 2
L Mappa zoomabile "immagine" Javascript 9

Discussioni simili