Unofficial WebSite X5
Area JS => Richieste Integrazioni => Topic aperto da: giampysa - 02 Febbraio, 2012, 17:22:04
-
Ciao ragazzi, vorrei chiedervi un aiuto riguardo l'inserimento del calcolo di un percorso come quello di google maps (es. partenza: aaa - destinazione: bbb ) che naturalmente debba far vedere su una mappa il risultato...vi sarei molto grato.
A presto :-)
-
Non credo che si possa fare...
-
Ho risolto...ho trovato dei codici facilissimissimi da implementare tramite un srmplice oggetto html :-)
-
Ah bravo... allora potresti postare la soluzione in modo che possa essere utile per gli altri...
-
Ho risolto...ho trovato dei codici facilissimissimi da implementare tramite un srmplice oggetto html :-)
Come hai risolto? Ci rendi partecipi?
Grazie.
Mauro
-
Salve a tutti...allora praticamente basta inserire un oggetto HTML e inserire questo codice:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: Directions</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:95%; }
input { width:250px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
calcRoute();
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
document.getElementById("submit").onclick = function() {
calcRoute();
}
}
function calcRoute() {
var partenza = document.getElementById("partenza").value;
var arrivo = document.getElementById("arrivo").value;
var request = {
origin:partenza,
destination:arrivo,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
window.onload = initialize;
</script>
</head>
<body>
<div>
<strong>Partenza: </strong>
<input type="text" id="partenza" value="AGROPOLI">
<strong>Arrivo: </strong>
<input type="text" id="arrivo" value="PAESTUM">
<input id="submit" type="button" value="Calcola percorso">
<>
<br>
<div id="map"><>
</br>
</body>
</html>
Giustamente dove io ho inserito le località...voi inserite le vostre
Non è nulla di che ma spero che vada bene anche per voi :-)
-
Salve a tutti...allora praticamente basta inserire un oggetto HTML e inserire questo codice:
Grazie per aver condiviso però non basta inserire TUTTO in un oggetto HTML :)
Anche se può funzionare lo stesso, sarebbe opportuno inserire al proprio posto le varie parti del codice.
Premetto che non ho la 9, alcuni "termini" potrebbero variare.
Questa parte la inserirei nelle proprietà della pagina (head).
Only registered users can see contents. Please click here to Register or Login.
Questa in un oggetto HTML (per esempio alto 500px):
<div id="percorso">
Partenza:
<input type="text" id="partenza" value="AGROPOLI" />
Arrivo:
<input type="text" id="arrivo" value="PAESTUM" />
<input id="submit" type="button" value="Calcola percorso" />
</div>
<div id="map"></div>
Questa parte nella sezione CSS dell'oggetto HTML:
#map {height:480px;}
#percorso input {width:250px;}
#percorso {font:bold 14px Tahoma;}
In rosso alcune personalizzazioni.
Spero di non aver fatto macello :)
-
è possibile inserire solo il campo partenza e preimpostare il campo arrivo in modo non modificabile?
-
Mah, così al volo potresti provare una cosa del genere (se funge):
In Head (modificare solo la variabile arrivo):
[...]
var arrivo = "Roma, RM, Italia";
[...]
Oggetto HTML:
<div id="percorso">
Partenza:
<input type="text" id="partenza" value="AGROPOLI" />
Arrivo: Roma
<input id="submit" type="button" value="Calcola percorso" />
</div>
<div id="map"></div>
Sicuramente si può fare di meglio, lascio la parola a chi ne sa più di me.
-
nn riesco a capire come gestire lo zoom
-
ripensandoci preferirei evitare la possibilità di calcolare il percorso MA preferirei mantenere questo tipo di grafica della mappa e non quella proposta da website x5...mi riferisco alla gestione dello zoom, e alla possibilità di avere attivo google street view
sapete aiutarmi?
grazie
-
Qui trovi un po' di info:
https://developers.google.com/maps/documentation/javascript/examples/
(https://developers.google.com/maps/documentation/javascript/examples/)
-
Qui trovi un po' di info:
https://developers.google.com/maps/documentation/javascript/examples/
(https://developers.google.com/maps/documentation/javascript/examples/)
ora guardo
-
nn ci capisco molto, anzi niente :-X
-
prove prove ma proprio non riesco a capire come si faccia
-
Ciao ragazzi, vorrei chiedervi un aiuto riguardo l'inserimento del calcolo di un percorso come quello di google maps (es. partenza: aaa - destinazione: bbb ) che naturalmente debba far vedere su una mappa il risultato...vi sarei molto grato.
A presto :-)
è possibile inserire solo il campo partenza e preimpostare il campo arrivo in modo non modificabile?
ripensandoci preferirei evitare la possibilità di calcolare il percorso MA preferirei mantenere questo tipo di grafica della mappa e non quella proposta da website x5...mi riferisco alla gestione dello zoom, e alla possibilità di avere attivo google street view
sapete aiutarmi?
grazie
Sinceramente mi sono perso. Non riesco a capire che cosa vuoi ottenere.
-
Ciao ragazzi, vorrei chiedervi un aiuto riguardo l'inserimento del calcolo di un percorso come quello di google maps (es. partenza: aaa - destinazione: bbb ) che naturalmente debba far vedere su una mappa il risultato...vi sarei molto grato.
A presto :-)
è possibile inserire solo il campo partenza e preimpostare il campo arrivo in modo non modificabile?
ripensandoci preferirei evitare la possibilità di calcolare il percorso MA preferirei mantenere questo tipo di grafica della mappa e non quella proposta da website x5...mi riferisco alla gestione dello zoom, e alla possibilità di avere attivo google street view
sapete aiutarmi?
grazie
Sinceramente mi sono perso. Non riesco a capire che cosa vuoi ottenere.
l'effetto che vorrei ottenere è quello dell'immagine allegata
-
Guarda se può fare al caso tuo la soluzione che avevo riportato su Answer per una richiesta che mi sembra simile alla tua.
http://answers.websitex5.com/post/25846
-
Guarda se può fare al caso tuo la soluzione che avevo riportato su Answer per una richiesta che mi sembra simile alla tua.
http://answers.websitex5.com/post/25846
però mi rimangono le freccette della tua guida al punto 4
-
Guarda se può fare al caso tuo la soluzione che avevo riportato su Answer per una richiesta che mi sembra simile alla tua.
http://answers.websitex5.com/post/25846
però mi rimangono le freccette della tua guida al punto 4
Il codice generato da Google visualizza quel tipo di immagine, con le freccette e senza l'omino di Street view. Genera però anche un collegamento (Visualizzazione ingrandiata della mappa), cliccando sul quale si apre direttamente Google maps nella forma da te richiesta.
-
Guarda se può fare al caso tuo la soluzione che avevo riportato su Answer per una richiesta che mi sembra simile alla tua.
http://answers.websitex5.com/post/25846
però mi rimangono le freccette della tua guida al punto 4
Il codice generato da Google visualizza quel tipo di immagine, con le freccette e senza l'omino di Street view. Genera però anche un collegamento (Visualizzazione ingrandiata della mappa), cliccando sul quale si apre direttamente Google maps nella forma da te richiesta.
ma con il codice fatto da lemonsong a pagina 1 invece compaiono le frecce dinamiche
-
Quel codice non l'ho "fatto" io.
Nel link postato c'è quasi tutto quello che ti serve.
Altrimenti in Google cerchi (per esempio): api maps google
-
Quel codice non l'ho "fatto" io.
Nel link postato c'è quasi tutto quello che ti serve.
Altrimenti in Google cerchi (per esempio): api maps google
ho letto questa guida:
http://www.appuntisoftware.it/google-maps-api-otteniamo-la-key-per-l-utilizzo/ (http://www.appuntisoftware.it/google-maps-api-otteniamo-la-key-per-l-utilizzo/)
ho seguito la procedura ma non riesco ad ottenere alcun risultato
come deve essere inserito il codice all'interno di website x5?
grazie
-
Qui http://www.yourinspirationweb.com/2012/01/19/come-utilizzare-la-mappe-di-google-tramite-le-api/ (http://www.yourinspirationweb.com/2012/01/19/come-utilizzare-la-mappe-di-google-tramite-le-api/) c'è una guida fatta molto bene, come tutte quelle presenti in quel sito.
Qui la mia prova (il calcola percorso è ancora provvisorio): http://stesil.altervista.org/evo10/mappa/ (http://stesil.altervista.org/evo10/mappa/)
-
L'avevo letta anche io tempo fa la guida e quell'articolo; mi ero promesso che non appena avrei trovato tempo provavo a montarla; vedo che adesso è giá qui!! Bene grazie anche da parte mia. ;D
Non l'ho provato ma vi sono tools online per la personalizzazione delle mappe...tipo questo:
http://powerhut.co.uk/googlemaps/custom_markers.php (http://powerhut.co.uk/googlemaps/custom_markers.php)
-
Qui http://www.yourinspirationweb.com/2012/01/19/come-utilizzare-la-mappe-di-google-tramite-le-api/ (http://www.yourinspirationweb.com/2012/01/19/come-utilizzare-la-mappe-di-google-tramite-le-api/) c'è una guida fatta molto bene, come tutte quelle presenti in quel sito.
Qui la mia prova (il calcola percorso è ancora provvisorio): http://stesil.altervista.org/evo10/mappa/ (http://stesil.altervista.org/evo10/mappa/)
grazie del link
ho provato a fare dei tentativi ma senza esito positivo, sicuramente sbaglio nel posizionare i codici all'interno di website
-
L'avevo letta anche io tempo fa la guida e quell'articolo; mi ero promesso che non appena avrei trovato tempo provavo a montarla; vedo che adesso è giá qui!! Bene grazie anche da parte mia. ;D
Prego :) Anche se, in verità, io ho fatto poco ... nell'articolo c'è proprio tutto quello che serve. :)
ho provato a fare dei tentativi ma senza esito positivo, sicuramente sbaglio nel posizionare i codici all'interno di website
Nel mio esempio in home page, ho inserito gli script in proprietà della pagina, scheda esperto, prima della chiusura del tag body.
In un oggetto html ho inserito il div per visualizzare la mappa:
Only registered users can see contents. Please click here to Register or Login.
nella scheda esperto dello stesso oggetto HTML il codice CSS
Only registered users can see contents. Please click here to Register or Login.
e ho allegato i due file immagine (il marker e l'immagine che si vede nel box).
Comunque se metti un link a una pagina di prova forse qualcosa di più si può capire.
-
ecco il link
http://www.optivist.com/maps.html (http://www.optivist.com/maps.html)
-
ho messo:
PRIMA DELLA CHIUSURA DI HEAD
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google Maps</title>
IN UN OGGETTO HTML
<div id="mappa"><>
HO CREATO IL FILE GOOGLE.JS E CARICATO NELLA CARTELLETTA FILES DEL SERVER
var miaPosizione = new google.maps.LatLng(45.015757,9.126978);
var settings = {
zoom: 15,
center: miaPosizione,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("mappa"), settings);
var mioLogo = new google.maps.MarkerImage('maurizio.png',
new google.maps.Size(60,120),
new google.maps.Point(0,0)
);
var mioMarker = new google.maps.Marker({
position: miaPosizione,
map: map,
icon: mioLogo,
title:"OptiVist"
});
var box = '<div><h1>OptiVist</h1>Via Emilia, 5 - 27045 Casteggio (PV) Tel.0383 82546 optivist@optivist.com Martedì-Sabato 9-12:30 e 15-19:30 Domenica 9-12:30 Lunedi CHIUSO<>';
var infobox = new google.maps.InfoWindow({
content: box
});
infobox.open(map,mioMarker);
ma non appare la mappa
-
ho messo:
PRIMA DELLA CHIUSURA DI HEAD
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google Maps</title>
Non serve. Ci sono già da programma. Cancellali entrambi.
Poi: gli script vanno inseriti in proprietà della pagina, scheda esperto, prima della chiusura del tag body, non in head. E nella tua prova manca l'inclusione di un file, da inserire prima del file google.js:
Only registered users can see contents. Please click here to Register or Login.
-
@Lemonsong: credo di aver fatto come mi hai detto:
http://www.optivist.com/maps.html (http://www.optivist.com/maps.html)
ma ancora nn funziona
-
Forse stai facendo confusione coi nick... e se fai confusione coi nick puoi immaginare da solo cosa fai coi codici.
Rileggi con attenzione quello che ha scritto quella santa (e paziente) donna di stesil.
-
scusatemi :-[
-
codice html
<div id="mappa"><>
css
#mappa {
height: 650px;
width: 950px;
}
#miobox {
font-family: Sintony;
font-size: 13px;
width: 300px;
text-align:left;
}
img.right{
float:right;
padding: 0 0 5px 15px;
}
prima della chiusura del teg body
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="google.js"></script>
file google.js
var miaPosizione = new google.maps.LatLng(45.015757,9.126978);
var settings = {
zoom: 15,
center: miaPosizione,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("mappa"), settings);
var mioLogo = new google.maps.MarkerImage('optivistmaps.png',
new google.maps.Size(60,120),
new google.maps.Point(0,0)
);
var mioMarker = new google.maps.Marker({
position: miaPosizione,
map: map,
icon: mioLogo,
title:"OptiVist"
});
var box = '<div><h1>OptiVist</h1>Via Emilia, 5 - 27045 Casteggio (PV) Tel.0383 82546 optivist@optivist.com Martedì-Sabato 9-12:30 e 15-19:30 Domenica 9-12:30 Lunedi CHIUSO<>';
var infobox = new google.maps.InfoWindow({
content: box
});
infobox.open(map,mioMarker);
ho fatto così ma non funziona
-
In attesa di occhi migliori dei miei, vedo che in HEAD hai scritto questo:
Only registered users can see contents. Please click here to Register or Login.
Non mi pare che stesil abbia scritto di metterlo in HEAD
Tu l'hai messo qui:
prima della chiusura del teg body
<script type="text/javascript" src="google.js"></script>
... ma con un percorso sbagliato!
Per il momento questo è quello che vedo, sicuramente ci sarà altro ma inizierei da qui.
Domanda: perché non segui alla lettera quello che ti viene detto?
-
Domanda: perché non segui alla lettera quello che ti viene detto?
perchè quando lavoro continuano a disturbarmi e poi faccio ste cavolate
-
perfect!!!
siete i migliori 8)
-
Ancora una volta ringrazio infinitamente stesil e lemonsong per il loro prezioso aiuto!!! ;D
-
ecco il risultato che ora devo solo modificare graficamente qua e la
secondo voi è possibile fare in modo che solo in questa pagina la cartina occupi tutta l'area grigia del sito?
ciao
Fabio