[Google Maps API Javascript] Personnaliser un itinéraire et ses marqueurs

Forum de discussions « Javascript - DHTML - VBScript »

Retrouvez les publications relatives à ces discussions dans notre rubrique javascript.

Menu déroulant, dimension du texte publié par drouin
Tutoriel AJAX publié par Dr_von_scott

[Google Maps API Javascript] Personnaliser un itinéraire et ses marqueurs

liste des forums liste des discussions Participer à la discussion

Message publié le mardi 23 février 2010 - 14h15 par AdrienVH. http://www.adrienvanhamme.fr/

Bonjour à tous,

Je cherche à personnaliser trois itinéraires contigus (A -> B, B -> C, C -> D).
J'aimerais en fait supprimer les marqueurs verts A, B, ...etc et/ou pouvoir changer la couleur bleue transparente de l'itinéraire...

Mon bout de code pour le moment

directionsPanel = document.getElementById('indications_googlemaps');
directions1 = new GDirections(map,directionsPanel);
directions2 = new GDirections(map,directionsPanel);
directions3 = new GDirections(map,directionsPanel);
directions1.load('from: 54 rue de la Joncquière, Paris to: 48.8947863,2.3188877',{getSteps:true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':false});
directions2.load('from: 48.8947863,2.3188877 to: 48.8446382,2.3419333',{getSteps:true,'travelMode':G_TRAVEL_MODE_DRIVING,'preserveViewport':false});
directions3.load('from: 48.8446382,2.3419333 to: 191 rue saint jacques, Paris',{getSteps:true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':true});
GEvent.addListener(directions3, "load", onGDirectionsLoad);

J'ai l'impression que ce n'est pas vraiment possible...

Ou alors peut-être avec getpolyline...

Une idée ? ^^

D'avance merci !

Adrien

participer

Message publié le mardi 23 février 2010 - 14h25 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Salut !...

Si, il me semble bien que ct possible !... j'ai bossé sur une api qui devait le gérer, je reprends mes sources, mais avant tout, tu bosse sur la gmap2 ou sur la gmap3 ... ?

participer

Message publié le mardi 23 février 2010 - 14h40 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

donc de ce que j'en ai vu, tu dois bien utiliser getPolyline() dans ce style :

http://code.google.com/intl/fr/apis/maps/documentation/reference.html#GDirections.getPolyline


directionsPanel = document.getElementById('indications_googlemaps');
directions1 = new GDirections(map,directionsPanel);
directions1.load('from: 54 rue de la Joncquière, Paris to: 48.8947863,2.3188877',{getSteps:true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':false});

GEvent.addListener(directions1, "load", function(){
    this.getPolyline().setStrokeStyle(style:{color:'red', width:'1px'});
    this.getMarker(int).setImage(url:string);
});

Voila, il me semble que c'est dans ce style en tous cas ;)

@++

participer

Message publié le mardi 23 février 2010 - 15h24 par AdrienVH. http://www.adrienvanhamme.fr/

Ah nours ! quel plaisir d'avoir une réponse :D

je bosse sur la Gmap2 mais sans savoir vraiment pourquoi... Tu crois que la Gmap3 va m'offrir plus de possibilités ?

Cela dit, je n'ai pas réussi à faire marcher ton exemple...


<script type="text/javascript">
var map;
var directionsPanel;
var directions1;
var directions2;
var directions3;
function initialize()
{
	// Carte
	map = new GMap2(document.getElementById('carte_googlemaps'),{backgroundColor:"#ffffff"});
	map.setMapType(G_SATELLITE_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	// Itinéraire
	directionsPanel = document.getElementById('indications_googlemaps');
	directions1 = new GDirections(map,directionsPanel);
	directions2 = new GDirections(map,directionsPanel);
	directions3 = new GDirections(map,directionsPanel);
	directions1.load('from: 54 rue Gauthey,Paris to: 48.8947863,2.3188877', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':false});
	directions2.load('from: 48.8947863,2.3188877 to: 48.8331280,2.4013925', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_DRIVING,'preserveViewport':false});
	directions3.load('from: 48.8331280,2.4013925 to: 90 rue de Tolbiac, Paris', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':true});
	GEvent.addListener(directions3, "load", onGDirectionsLoad);
}
function onGDirectionsLoad()
{
	document.getElementById('indicationsroutes_googlemaps').innerHTML = directions1.getDistance().meters + ' mètres à pied, puis<br />';
	document.getElementById('indicationsroutes_googlemaps').innerHTML += directions2.getDistance().meters/1000 + ' kilomètres à vélo, puis<br />';
	document.getElementById('indicationsroutes_googlemaps').innerHTML += directions3.getDistance().meters + ' mètres à pied<br />';
	var temps = Math.round(((directions1.getDistance().meters / 1.11)+(directions2.getDistance().meters / 4.16)+(directions3.getDistance().meters / 1.11))/60);
	document.getElementById('indicationsroutes_googlemaps').innerHTML += 'Environ ' + temps + ' minutes, dont '+Math.round((directions2.getDistance().meters / 4.16)/60)+' minutes en vélib !';
}
</script>

Tu as un exemple en ligne de ce que tu avais réussi à faire ?

Merci beaucoup Nours !

Adri

participer

Message publié le mardi 23 février 2010 - 15h25 par AdrienVH. http://www.adrienvanhamme.fr/

Le code fourni c'est là où j'en suis dans mon projet mais sans ton exemple adapté :/

participer

Message publié le mardi 23 février 2010 - 19h31 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Yop !...

Bon, j'ai repris le code par ce que je n'ai pas retrouvé mes sources !... en plus il fallait que je m'y colle d'ici peut !...

Donc, tout ce que je t'ai dis est vrai :D ... pas mal hein !?

dans ton code, tu place un évent sur load de ton 3ieme itinéraire, ce qui fait que celui-ci n'est pas mis à l'écran :$ ... Pour le traité, j'ai mis un 4ieme, mais je suppose qu'il doit y avoir un moyen pour améliorer ceci en fouillant dans la gestion afterLoad (mais j'ai pas trouvé ^^)

dans l'état, j'ai masqué les icones vertes tooMoches, mais en utilisant setImage() au lieu de hide() tu peux lui attribuer une nouvelle url (par contre tu gardes les mm dimensions et la mm ombre, donc regardes du coté des marker pour attribuer une nouvelle Icone (et ainsi attribuer ton image avec tes dimensions, et ton ombre ...

ça fonctionne ici :: http://4code.nours312.com/adri-01.html tu comprendra vite le code, c'est le tiens ^^ :D


			var map;
			var directionsPanel;
			var directions1;
			var directions2;
			var directions3;
			function initialize() {
				// Carte
				map = new GMap2(document.getElementById('carte_googlemaps'),{backgroundColor:"#ffffff"});
				map.setMapType(G_SATELLITE_MAP);
				map.addControl(new GLargeMapControl());
				map.addControl(new GMapTypeControl());
				// Itinéraire
				directionsPanel = document.getElementById('indications_googlemaps');
				directions1 = new GDirections(map,directionsPanel);
				directions2 = new GDirections(map,directionsPanel);
				directions3 = new GDirections(map,directionsPanel);
				directions4 = new GDirections(map,directionsPanel);
				directions1.load('from: 54 rue Gauthey,Paris to: 48.8947863,2.3188877', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':false});
				directions2.load('from: 48.8947863,2.3188877 to: 48.8331280,2.4013925', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_DRIVING,'preserveViewport':false});
				directions3.load('from: 48.8331280,2.4013925 to: 90 rue de Tolbiac, Paris', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':true});
				directions4.load('from: 48.8331280,2.4013925 to: 90 rue de Tolbiac, Paris', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':true});
				GEvent.addListener(directions4, "load", onGDirectionsLoad);
			}
			function onGDirectionsLoad() {
				directions1.getPolyline().setStrokeStyle({ color:'red', width:'1px'} );
				directions2.getPolyline().setStrokeStyle({ color:'green', width:'1px'} );
				directions3.getPolyline().setStrokeStyle({ color:'red', width:'1px'} );
				directions1.getMarker(0).hide();
				directions2.getMarker(0).hide();
				directions3.getMarker(0).hide();
				console.log(directions1);
				directions1.getMarker(1).hide();
				directions2.getMarker(1).hide();
				directions3.getMarker(1).hide();
				document.getElementById('indicationsroutes_googlemaps').innerHTML = directions1.getDistance().meters + ' mètres à pied, puis<br />';
				document.getElementById('indicationsroutes_googlemaps').innerHTML += directions2.getDistance().meters/1000 + ' kilomètres à vélo, puis<br />';
				document.getElementById('indicationsroutes_googlemaps').innerHTML += directions3.getDistance().meters + ' mètres à pied<br />';
				var temps = Math.round(((directions1.getDistance().meters / 1.11)+(directions2.getDistance().meters / 4.16)+(directions3.getDistance().meters / 1.11))/60);
				document.getElementById('indicationsroutes_googlemaps').innerHTML += 'Environ ' + temps + ' minutes, dont '+Math.round((directions2.getDistance().meters / 4.16)/60)+' minutes en vélib !';
			}

J'ai utilisé getPolyline().setStrokeStyle() et getMarker()

BonCourage ;)

participer

Message publié le mardi 23 février 2010 - 21h24 par AdrienVH. http://www.adrienvanhamme.fr/

Bon j'ai regardé un peu et j'ai essayé de bidouiller pour comprendre la logique mais...

J'arrive à changer la couleur des tracés... mais pas leur épaisseur :-(

Et impossible aussi de supprimer TOUS les marqueurs... Il y a toujours les deux derniers qui restent !

P.S. C'est quoi le console.log que tu as laissé ?

Merci pour tout nours... Le setStrokeStyle va déjà beaucoup m'aidé !

Adri

participer

Message publié le mardi 23 février 2010 - 21h36 par AdrienVH. http://www.adrienvanhamme.fr/

Je vois vraiment pas ce qui cloche là...


var map;
var directionsPanel;
var directions1;
var directions2;
var directions3;
function initialize()
{
	// Carte
	map = new GMap2(document.getElementById('carte_googlemaps'),{backgroundColor:"#ffffff"});
	map.setMapType(G_PHYSICAL_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	// Itinéraire
	directionsPanel = document.getElementById('indications_googlemaps');
	directions1 = new GDirections(map,directionsPanel);
	directions2 = new GDirections(map,directionsPanel);
	directions3 = new GDirections(map,directionsPanel);
	directions1.load('from: 54 rue Gauthey,Paris to: 48.8947863,2.3188877', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':false});
	directions2.load('from: 48.8947863,2.3188877 to: 48.8880708,2.3277068', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_DRIVING,'preserveViewport':false});
	directions3.load('from: 48.8880708,2.3277068 to: rue Hélène, Paris', {'getPolyline':true,'getSteps':true,'travelMode':G_TRAVEL_MODE_WALKING,'preserveViewport':true});
	GEvent.addListener(directions3, "load", onGDirectionsLoad);
}
function onGDirectionsLoad()
{
	directions1.getPolyline().setStrokeStyle({color:'orange', width:'50px'});
	directions2.getPolyline().setStrokeStyle({color:'purple', width:'50px'});
	directions3.getPolyline().setStrokeStyle({color:'orange', width:'50px'});
	directions1.getMarker(0).hide();
	directions2.getMarker(0).hide();
	directions3.getMarker(0).hide();
	directions1.getMarker(1).hide();
	directions2.getMarker(1).hide();
	directions3.getMarker(1).hide();
}

participer

Message publié le mardi 23 février 2010 - 21h38 par AdrienVH. http://www.adrienvanhamme.fr/

Ok pour le coup du 4èmé itinéraire : j'avais pas lu, j'y ai pensé, j'ai relu, j'ai capté ^^

participer

Message publié le mardi 23 février 2010 - 22h33 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

oups ^^ dsl pour le console.log() c'est pour débugger dans firebug ...

participer

Message publié le mardi 23 février 2010 - 22h41 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

reOups ^^ ...

désolé, je suis un boulet, et j'ai codé un peu à l'arrache !...

pour les propriété de la class GPolyStyleOptions ce n'est pas width mais weight et ce n'est aps une chaine mais un nombre :@ ... là ça fonctionne !!

au faite, vérifi le parametre color, il est possible que d'anciennes versions de navigateur préfèrent une hexa !..

participer

Message publié le mercredi 24 février 2010 - 11h17 par AdrienVH. http://www.adrienvanhamme.fr/

Merci pour la précision... D'ailleurs j'avais changé par moi même en héxa :D

Je vais essayer maintenant d'intégrer mes propres marqueurs mais du coup je vais devoir re-récupérer la lat/lng des adresses que je demande lol

J'ai fais des essais mais j'arrive pas non plus à gérer le géocoder... :(

Ca fait trop longtemps que j'avais pas codé : j'suis complétement rouillé !

Adri

participer

Message publié le mercredi 24 février 2010 - 11h17 par AdrienVH. http://www.adrienvanhamme.fr/

M'enfin le pb est résolu :D...

participer

Message publié le mercredi 24 février 2010 - 11h51 par AdrienVH. http://www.adrienvanhamme.fr/

Tu avais une idée pour éviter de devoir tracer un 4ème itinéraire ou pas au fait ?

participer

Message publié le mercredi 24 février 2010 - 13h43 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Bon, j'ai réussi un truc ... mais c'est pas top top vu que je ne comprend pas pourkoi il ne prends pas en compte le Bon marker ^^
http://4code.nours312.com/adri-01.html


			function onGDirectionsLoad() {
				directions1.getPolyline().setStrokeStyle({ color:'red', weight:10} );
				directions2.getPolyline().setStrokeStyle({ color:'green', weight:20} );
				directions3.getPolyline().setStrokeStyle({ color:'red', weight:5} );
				
				directions1.getMarker(0).hide();
				directions2.getMarker(0).hide();
				directions3.getMarker(0).hide();
				directions1.getMarker(1).hide();
				directions2.getMarker(1).hide();
				directions3.getMarker(1).hide();

				directions1.getMarker(0).getIcon().image = "http://cap-services.fr/gMapIcone/capServices.png";
				directions1.getMarker(0).getIcon().shadow = "http://cap-services.fr/gMapIcone/shadowBubble.png";
				directions1.getMarker(0).getIcon().iconSize = new GSize(48,50);
				directions1.getMarker(0).getIcon().shadowSize = new GSize(100,50);
				directions1.getMarker(0).getIcon().iconAnchor = new GPoint(7,48);

				directions3.getMarker(1).getIcon().image = "http://cap-services.fr/gMapIcone/fondatech.png";
				directions3.getMarker(1).getIcon().shadow = "http://cap-services.fr/gMapIcone/shadowBubble.png";
				directions3.getMarker(1).getIcon().shadowSize = new GSize(100,50);
				directions3.getMarker(1).getIcon().iconSize = new GSize(48,50);
				directions3.getMarker(1).getIcon().iconAnchor = new GPoint(7,48);
				
				document.getElementById('indicationsroutes_googlemaps').innerHTML = directions1.getDistance().meters + ' mètres à pied, puis<br />';
				document.getElementById('indicationsroutes_googlemaps').innerHTML += directions2.getDistance().meters/1000 + ' kilomètres à vélo, puis<br />';
				document.getElementById('indicationsroutes_googlemaps').innerHTML += directions3.getDistance().meters + ' mètres à pied<br />';
				var temps = Math.round(((directions1.getDistance().meters / 1.11)+(directions2.getDistance().meters / 4.16)+(directions3.getDistance().meters / 1.11))/60);
				document.getElementById('indicationsroutes_googlemaps').innerHTML += 'Environ ' + temps + ' minutes, dont '+Math.round((directions2.getDistance().meters / 4.16)/60)+' minutes en vélib !';
			}

Comme tu peux le voir en ligne, au lieu de placer l'icone sur le premier marker de directions1, il le place sur la premiere icone de directions3 ... ^o ... pas cool ^^

J'espère que ça t'aidera tout de meme un peu !...
Je cherche toujours pour l'event, une solution plus propre ;) @++

participer

Message publié le jeudi 25 février 2010 - 10h21 par AdrienVH. http://www.adrienvanhamme.fr/

J'ai trouvé un truc pour éviter de passer par un quatrième itinéraire :


GEvent.addListener(itineraire3, "load", function(){setTimeout('onGDirectionsLoad()',0)});

participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Les 5 dernières discussions

input text écrit à la fin seulement !!!!! (2 réponses)
splash screen (2 réponses)
supprimer des dossiers sur ftp après un hack (2 réponses)
fenetre popup (10 réponses)
code javascript (1 réponse)

all html : Le portail des webmaster

Forum de discussions « Javascript - DHTML - VBScript »

[Google Maps API Javascript] Personnaliser un itinéraire et ses marqueurs

Les 5 dernières discussions