Utiliser des marqueurs personnalisés

**eddy66** · 29/01/2015, 17h51

Bonjour à tous,

Je souhaiterais ajouter un marker personnalisé sur google map , mais je n'y arrive pas

J'ai lu pas mal de choses à ce sujet, mais ne maîtrisant pas le javascript, je galère.

Quelqu'un pourrait-il m'aider svp ?

Voici le code qui fonctionne, mais avec des markers standard.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(42.617718, 2.423230999999987);
				var optionsCarte = {
					zoom: 16,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
 
	 <!-- var optionsMarqueur = {position: new google.maps.LatLng(x,y),	map: maCarte};var marqueur = new google.maps.Marker(optionsMarqueur);	 -->			
 
 
				var optionsMarqueur = {
					position: new google.maps.LatLng(42.614920, 2.426644),
					map: maCarte
				};
 
 
				var marqueur = new google.maps.Marker(optionsMarqueur);
 
				var image = new google.maps.MarkerImage('c:/marker travaux.png');
 
				var optionsMarqueur = {
					position: new google.maps.LatLng(42.614119, 2.420700),
 
					map: maCarte,
 
					title:"travaux en cours" ,
 
					icon: image				
 
				};
 
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			 google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
 
	<body>
		<div id="EmplacementDeMaCarte"></div>
 
	</body>
</html>

J'ai fais des essais avec l'image en question sur mon HDD, mais logiquement elle est hébergée , je l'ai mise ici : http://imagesia.com/marker-travaux_twnk

enfin, je voudrais qu'en cliquant sur cet icone de la Map, ça renvoie vers une page de mon site.

Merci beaucoup pour votre aide

Eddy

**Bovino** · 29/01/2015, 18h00

Comment modifier l'aspect (image) d'un marker ?

Sinon, que vient faire un commentaire HTML dans du code JavaScript ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var image = new google.maps.MarkerImage('c:/marker travaux.png');

C'est quoi cette URL ?

**eddy66** · 29/01/2015, 18h41

l'url de l'image c'est : http://imagesia.com/marker-travaux_twnk

je vois pas la syntaxe pour le faire fonctionner ?

si je remplace par cette url , rien ne s'affiche .

Je précise que je n'y connaît rien en javascript.

Merci

Eddy

**NoSmoking** · 29/01/2015, 23h42

Bonjour,
tu peux également indiquer l'image que tu veux utiliser dans les options du marqueur lors de sa création.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var optionsMarqueur = {
  position: new google.maps.LatLng(42.614119, 2.420700),
  map: maCarte,
  title: "travaux en cours",
  icon: 'http://img.imagesia.com/fichiers/tw/marker-travaux_imagesia-com_twnk.png'
};

Pour info google.maps.MarkerImage est "deprecated" depuis la version 3.11, maintenant il faut passer par un google.maps.Icon, même si cela continu de fonctionner.

**eddy66** · 01/02/2015, 00h38

Bonsoir,

Merci, nickel ça fonctionne !

J'ai essayé pas mal de trucs , j'ai bien envie de m'y mettre (maîtriser le javascript et le html) car je risque d'en avoir de plus en plus besoin pour mes applications.

D'ailleurs j'ai récupéréun code intéressant sur le site, sur la mise en place de plusieurs marqueurs indexés, beaucoup plus propre que mes copiés/collés.

Je voudrais faire la même chose pour cet icone, mais je vois pas trop comment faire pour passer une variable contenant l'adresse de l'icone (location[i] [3]) contient l'URL de l'image:

En fait, je voudrais pouvoir attribuer un icone différent selon les types de marqueurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
for (i = 0; i < locations.length; i++) { 
 
 
		marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][4]),
        map: map,
		icon : (locations[i],[3]) 
      });

Merci encore mille fois

David

**NoSmoking** · 01/02/2015, 08h44

icon : (locations[i],[3])

cela sort d'où ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][4]),
  map: map,
  icon: locations[i][3]  // ATTENTION à la syntaxe !!
});

**eddy66** · 01/02/2015, 09h31

Bonjour,

J'ai récupéré ce code sur le forum il me semble, car il correspond exactement à ce que je veux obtenir.

Je l'ai adapté (tant bien que mal) à mes besoins, et effectivement maintenant ça fonctionne (quelle tête en l'air je suis

), Merci beaucoup!

Il fût un temps où je maîtrisais assez bien un langage maintenant révolu (le quick Basic ), mais qui à l'époque permettait de faire pas mal de truc sympas.

en ce temps là, il fallait tout se programmer (les plus anciens d'entre vous doivent se rappeler ?), les gestions curseurs, la gestion des interfaces utilisateur et graphique... ça faisait des programmes avec énormément de code, il fallait tout se créer, en partant de rien , le fameux curseur qui clignote sur l'écran...

Mon dernier programme, je l'avais quasiment tout développé ( sur papier ) pendant mes longs WE de mobilisation à l'armée, et avait tout repris ensuite à la maison sur un vieux Sanyo à disques 5"1/4 , sans disque dur, et sous DOS 6.2 ... Pour dire que ça date.

Ce programme gérait la présentation, la gestion des fichiers I/O , le graphisme (topographie) avec une grosse partie calculs, et surtout une gestion curseur et des fenêtres déroulantes (comme on connaît à ce jour).

Ce programme tournait dans sa partie principale sur 30 lignes environ ( hors mis la partie déclaration et initialisation souris), le reste était tout sous formes de SUB indépendants et utilisables depuis n'importe qu'elle application.

En plus , les ordis de l'époque étaient si peu performants (graphique, processeur, stockage, mémoire vive...) que ça obligeait à toujours trouver des astuces pour coder.

Depuis quelques temps, j'avais envie de m'y remettre, non pas a QB, mais à un truc bien plus évolué ( .NET, C# ou un truc du genre...) , mais je sais pas si c'est mes restes de prog en QB qui me pourrissent l'esprit, mais je galère grave avec la POO.

J'essaye de m'y intéresser en puisant des infos sur des forums comme celui-ci, très bien documentés au passage, et avec des membres très sympas, mais je dois reconnaître que c'est pas forcément la meilleure solution.

Je suis pourtant motivé, malgré ces 25 ans d'inactivité dans la programmation... je me suis acheté des livres sur le C#, et sur VB.NET, j'essaye d'étudier ça quand je peux, mais dur dur.

Je me rends compte que je pense toujours en QB pour la façon de coder

Je continue à programmer un peu en langage Basic sur Crystal Report, ce qui m'oblige à garder "un pied dans le Basic"...

L'exemple de mon dernier message est flagrant , j'ai pourtant manipulé plusieurs fois cette variable dans le code, mais la virgule entre les 2 indexs de la variable "locations"est un reste de QB... OUPS

en tout cas c'est gentil à vous pour votre patience.

J'ai un millier de questions et d'idées pour cette API Google que je suis en train de mettre en place sur une page de mon site, mais j'ose vraiment pas vous embêter avec, d'autant plus que ce serait vraiment bien que je m'y mette vraiment pour le coup!

Bonne journée

Eddy

Utiliser des marqueurs personnalisés [Google Maps]

APIs Google

Discussions similaires

Partager

Partager