Utiliser des marqueurs personnalisés

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

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, 19h00

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, 19h41

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** · 30/01/2015, 00h42

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, 01h38

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, 09h44

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 !!
});

Utiliser des marqueurs personnalisés [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager