Personnalisation d'un repère Google Maps

**Domi2** · 24/06/2009, 17h21

Bonjour,

Je ne suis pas certain de poster dans le bon forum. Si un modérateur estime qu'il faut déplacer la discussion...

J'essaie de personnaliser le "repère" utilisé lors d'un affichage dans Google Maps (affichage dans un contrôle Microsoft Web Browser d'une appli Access).

Le code original, avec affichage du repère "standard" à la position (Lat et Long) passée en paramètre :

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
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=fr" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("myMap"));
  map.setCenter(new GLatLng(47.05,2.2),5,G_NORMAL_MAP);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());  
  map.enableScrollWheelZoom();
  }
}
function affMsg(lat,lon,z,msg) {
if (map) {
        var latlng = new GLatLng(lat,lon);
        var marker = new GMarker(latlng);
        map.addOverlay(marker);
        if (z>0) {
                map.setCenter(latlng,z,G_NORMAL_MAP);
        }
        if (msg) {
                GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(msg);
                });
        }
}
}
</script>
</head>
<body style="overflow:hidden;margin-top:0px; margin-left:0px" onload="initialize()" onunload="GUnload()">
  <div id="myMap" style="width:970px;height:557px"></div>
</body>
</html>

Le code modifié :

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
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=fr" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("myMap"));
  map.setCenter(new GLatLng(47.05,2.2),5,G_NORMAL_MAP);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());  
  map.enableScrollWheelZoom();
                
  }
}
function affMsg(lat,lon,z,msg) {
if (map) {
        var latlng = new GLatLng(lat,lon);
//      Initialisation d'un nouvel objet GIcon et des ses propriétés (repère personnalisé)
        var MonIcon = new GIcon(); 
//      MonIcon.shadow = "icones/Sujets/house-s.png"; // Image "Ombre"
        MonIcon.shadowSize=new GSize(56,32); // Dimensions de l'image "Ombre"
        MonIcon.iconSize=new GSize(32,32);
        MonIcon.iconAnchor=new GPoint(16,32);
      MonIcon.image="C:\PROJETS ACCESS\HESTIA\Système\house.png"; 
//      Fin initialisation nouvel objet GIcon   
        var marker = new GMarker(latlng,MonIcon);
        map.addOverlay(marker);
        if (z>0) {
                map.setCenter(latlng,z,G_NORMAL_MAP);
        }
        if (msg) {
                GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(msg);
                });
        }
}
}
</script>
</head>
<body style="overflow:hidden;margin-top:0px; margin-left:0px" onload="initialize()" onunload="GUnload()">
  <div id="myMap" style="width:970px;height:557px"></div>
</body>
</html>

Les lignes ajoutées sont celles de l'inialisation de l'objet GIcon et j'ai modifié cette ligne.

Code :

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

var marker = new GMarker(latlng,MonIcon);

Je n'ai aucun message d'erreur, la carte se positionne bien à l'endroit voulu, mais le repère ne s'affiche pas.

Je ne connais que très peu HTML et je ne suis pas du certain que le chemin vers mon image soit correctement déclaré.

Merci par avance.

Domi2

**Domi2** · 25/06/2009, 09h46

Bonjour,

En partie résolu.

C'est bien le chemin vers l'image qui pose problème (avec les accents).

Par contre, mon message personnalisé ne s'affiche plus.

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
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=fr" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("myMap"));
  map.setCenter(new GLatLng(47.05,2.2),5,G_NORMAL_MAP);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());  
  map.enableScrollWheelZoom();
                
  }
}
function affMsg(lat,lon,z,msg) {
if (map) {
        var latlng = new GLatLng(lat,lon);
//      Initialisation d'un nouvel objet GIcon et des ses propriétés (repère personnalisé)
        var MonIcon = new GIcon(); 
//      MonIcon.shadow = "icones/Sujets/house-s.png"; // Image "Ombre"
//      MonIcon.shadowSize=new GSize(56,32); // Dimensions de l'image "Ombre"
        MonIcon.iconSize=new GSize(32,32);
        MonIcon.iconAnchor=new GPoint(32,32);
      MonIcon.image="C:/PROJETS ACCESS/HESTIA/Systeme/house.png"; //Chemin vers l'image modifié 
//      Fin initialisation nouvel objet GIcon   
        var marker = new GMarker(latlng,MonIcon);
        map.addOverlay(marker);
        if (z>0) {
                map.setCenter(latlng,z,G_NORMAL_MAP);
        }
        if (msg) {
                GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(msg);
                });
        }
}
}
</script>
</head>
<body style="overflow:hidden;margin-top:0px; margin-left:0px" onload="initialize()" onunload="GUnload()">
  <div id="myMap" style="width:970px;height:557px"></div>
</body>
</html>

J'ai maintenant un message d'erreur (voir pièce joint)

Si quelqu'un a une idée...

Merci.

Domi2

**Domi2** · 25/06/2009, 15h57

Ok, cela fonctionne...

Il semble que mon erreur provenait du fait qu'il faut déclarer tous les paramètres si on utilise une image personnalisée comme repère, notamment le positionnement de la base de l'image par rapport au "point" et le positionnement de l'infobulle au dessus de l'image (c'est ce paramètre qui me manquait).

Code :

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

MonIcon.infoWindowAnchor = new GPoint(16, 1); //Positionnement de l'infobulle au-dessus de l'image

Le code complet

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
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=fr" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("myMap"));
  map.setCenter(new GLatLng(47.05,2.2),5,G_NORMAL_MAP);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());  
  map.enableScrollWheelZoom();
                
  }
}
function affMsg(lat,lon,z,msg) {
if (map) {
        var latlng = new GLatLng(lat,lon);
 
//      Initialisation d'un nouvel objet GIcon et des ses propriétés (repère personnalisé)
        var MonIcon = new GIcon(); 
        MonIcon.iconSize=new GSize(32,32);
        MonIcon.iconAnchor=new GPoint(16,32); //Positionnement de la base de l'image
        MonIcon.infoWindowAnchor = new GPoint(16, 1); //Positionnement de l'infobulle au-dessus de l'image
      MonIcon.image="C:/PROJETS ACCESS/HESTIA/Systeme/house.png"; //Chemin vers l'image modifié
//      Fin initialisation nouvel objet GIcon
        
        var marker = new GMarker(latlng,MonIcon);
        map.addOverlay(marker);
 
        if (z>0) {
              map.setCenter(latlng,z,G_NORMAL_MAP);
      }
        if (msg) { 
              GEvent.addListener(marker, "click", function() { 
                marker.openInfoWindowHtml(msg);
              });
      }
}
}
</script>
</head>
<body style="overflow:hidden;margin-top:0px; margin-left:0px" onload="initialize()" onunload="GUnload()">
  <div id="myMap" style="width:970px;height:557px"></div>
</body>
</html>

Domi2

Personnalisation d'un repère Google Maps

HTML

Discussions similaires

Partager

Partager