Ciao a tutti gli utenti del sito
Questa è la creazione di uno Store Locator tramite l'API di Google Maps, che segue il tutorial fornito da Google disponibile a questo link: https: //developers.google.com/maps/solutions/store-locator/clothing-store- locator
Spiega la creazione di uno Store Locator, l'unico problema che la guida non è stata aggiornata e mostra alcune funzionalità di PHP ormai deprecate e non utilizzabili nella versione di oggi (2018) il numero 7
Vorrei che questa domanda avesse due possibilità, la prima di lasciare una risoluzione a tutte quelle persone che sono alla ricerca di un modo per compensare questa guida antiquata, riportare i codici e essere utili alla comunità.
Inizia dicendo che il codice composto da questi 3 file (il mio) è completamente funzionale e riconoscibile per essere personalizzato a livello di variabili e db:
- index.php che sarebbe index.php (google)
- conexao.php che sarebbe phpsqlsearch_dbinfo.php (google)
- resultado.php che sarebbe storelocator.php (google)
Scrivo quale sia il mio obiettivo e quale supporto mi servirebbe dalla comunità poiché non ho competenze qualificate nel linguaggio di programmazione Javascript.
Obiettivo: mi piacerebbe confrontare pubblicando il codice sul sito: il mio con quello della guida di Google perché quello di cui ho bisogno sono solo pochi dati:
- Implementare nel mio codice il modulo e le variabili Javascript della guida di Google, in modo che dall'invio dell'input venga generata una ricerca corretta.
- Scrivi la query resa disponibile da Google con quella sul mio file (campi):
index.php:
conexao.php:Codice PHP:
<div id="map-container-4" style="height: 100vh"></div></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map-container-4'), {
center: new google.maps.LatLng(41.902658, 12.495477),
zoom: 11
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('resultado.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
// Specifica le variabili e i loro relativi nomi associati al database
var codice_impianto_in_attivita = markerElem.getAttribute('codice_impianto_in_attivita');
var cim_impianto_in_attivita = markerElem.getAttribute('cim_impianto_in_attivita');
var indirizzo_impianto_in_attivita = markerElem.getAttribute('indirizzo_impianto_in_attivita');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('latitudine_impianto_in_attivita')),
parseFloat(markerElem.getAttribute('longitudine_impianto_in_attivita')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = codice_impianto_in_attivita
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var strong = document.createElement('strong');
strong.textContent = cim_impianto_in_attivita
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = indirizzo_impianto_in_attivita
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbn9gIka8i-33HotlIor7GHMt2WEo_aAQ&callback=initMap"> </script>
resultado.php:Codice PHP:
<?php$servidor = "YOUR_HOST";
$usuario = "YOUR_USER";
$senha = "YOUR_PSW";
$dbname = "YOUR_DB";
//Criar a conexao $conn = mysqli_connect($servidor, $usuario, $senha, $dbname);
Codice PHP:
<?phprequire("conexao.php");
function parseToXML($htmlStr){
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Select all the rows in the markers table
$result_markers = "SELECT * FROM ca2_2ac_impianti_in_attivita";
$resultado_markers = mysqli_query($conn, $result_markers);
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row_markers = mysqli_fetch_assoc($resultado_markers)){
// Add to XML document node
echo '<marker ';
echo 'codice_impianto_in_attivita="' . parseToXML($row_markers['codice_impianto_in_attivita']) . '" ';
echo 'cim_impianto_in_attivita="' . parseToXML($row_markers['cim_impianto_in_attivita']) . '" ';
echo 'indirizzo_impianto_in_attivita="' . parseToXML($row_markers['indirizzo_impianto_in_attivita']) . '" ';
echo 'latitudine_impianto_in_attivita="' . $row_markers['latitudine_impianto_in_attivita'] . '" ';
echo 'longitudine_impianto_in_attivita="' . $row_markers['longitudine_impianto_in_attivita'] . '" ';
echo 'type="' . $row_markers['type'] . '" ';
echo '/>';
}
// End XML file