Ajout d'une Image dans google Map

**loribac** · 13/04/2014, 17h13

Bonjour TiranusKBX

J'ai une carte transparent du type image.gif je connais sa MAXLAT MAXLONG ET MINILAT MINILONG JE voudrais simplement la superposer a m on fond google
aprés avoir regarder sur le net je ne trouve pas d’explications très claire pouvez vous me donner des pistes de reflexions

Bien cordialement

**TiranusKBX** · 14/04/2014, 03h38

pour cela il te vas falloir jouer avec le placement de points personnalisé et le zoom de la carte
me demande pas plus de détails ça fait plus d'un an que j'y ait touché

**loribac** · 14/04/2014, 11h32

TiranusKBX

J 'ai trouvé cela sur le net reste mais cela net mais pas encore pu l 'adapter si quelqu'un a un exemple complet !!!!!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
 
 
// ground overlay
 
                var boundaries = new GLatLngBounds(new GLatLng(41.4389,-14.9515), new GLatLng(59.9934,20.4106));
 
var oldmap = new GGroundOverlay("http://www.xxxxxx.fr/COPY/image.gif", boundaries);
 
                map.addOverlay(oldmap);

**loribac** · 14/04/2014, 11h53

Bon j 'ai trouvé ceci mais maintenant je n'arrive pas a inclure l'info window (GRRRRR !!!!!) pour la superposition de la carte c'est ok .

a noter que cela ne me plante pas la 'affichage de la carte c'est juste qu'il manque l'info window

Voici 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
 
 
<meta name="description" content="test" />
 
<meta name="keywords" content="test"/>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-store"/>
<meta name="resource-type" content="document"/>
<meta name="distribution" content="global"/>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxw79QL_0aBSimRfjs_xGGoxR78JChdwdCCIjpkR5fuJMACslOeA" type="text/javascript">
</script>   
 
 
<script type="text/javascript">
 
function initialize() {
                if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(53.6184, -3.0128), 5);
		map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
                map.addMapType(G_PHYSICAL_MAP);
 
		map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(2, 65)));
                map.setMapType(G_HYBRID_MAP);
 
// ground overlay
 
                var boundaries = new GLatLngBounds(new GLatLng(41.4389,-14.9515), new GLatLng(59.9934,20.4106));
 
var oldmap = new GGroundOverlay("http://www.xxxxxxxxx.fr/COPY/image.gif", boundaries);
 
                map.addOverlay(oldmap);
 
 
 
 
 
 
 
/////////////////////////////////////////////////////////////////////// test ///////////////////////////////////////////////////////////////////////
<?php
 
$fp = fopen("http://www.xxxxxxx.fr/TEST/bloc.txt", "r");
$coord=fread($fp,2000);fclose($fp);
$tab = split("x",$coord);
 
   // On identifie les valeurs intéressantes
   $cor1 = $tab[2];
   $cor2 = $tab[3];
   $stamp= $tab[4];
 
$stamp = substr("$stamp", 0,10); // ici le timestamp
$time=time();
$diff = ($time- $stamp)/60/60;
$hours = '2';
if ($hours > $diff)
{
$color=("red");
}
 
else
{
 
$color=("black");
 
}
 
?>
 
 
// création d'une infobulle et affichage
  var oInfo = new google.maps.InfoWindow({
    'content' : '<small><small><a href="http://www.xxxxxxx.fr/rr.php"><FONT COLOR="<?php echo"$color";?>" ><span style="font-weight: bold;">TEST</span></FONT></a></small></small>', // contenu qui sera affiché  
    'map' : map_canvas,                                           // carte sur laquelle est affichée l'InfoWindow    
    'position' : new google.maps.LatLng(<?php echo "$cor1,$cor2";?>)       // position d'affichage de l'InfoWindow
  });
 
 
}
 
}
 
 
 
</script>
 
</head>
 
<body style="margin:0px;" onload="initialize();" onunload="GUnload()">
 
<div id="map_canvas" style="width: 530px; height: 530px"></div>
 
</body>
</html>

**NoSmoking** · 14/04/2014, 19h09

Bonjour,
et cela donne quoi avec une version de l'API qui n'est pas obsolète ?

Il serait peut être temps que tu mettes dans tes favoris la Documentation officielle.

**loribac** · 14/04/2014, 22h21

bon ok j'ai rectifié et vérifie la version de l 'api ( gros oups !)
mais je n'arrive pas inclure mon info windows je ne vois pas ou cela bug

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
 
</style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
 
 
var historicalOverlay;
 
function initialize() {
 
  var France = new google.maps.LatLng(47,2);
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(41.4389,-14.9515),
      new google.maps.LatLng(59.9934,20.4106));
 
  var mapOptions = {
   'Zoom': 6,
 'minZoom' : 4,
 'maxZoom' :11,  
 
 
    center: France
  };
 
 
 
 
  var map = new google.maps.Map(document.getElementById('maCarte'),
      mapOptions);
 
  historicalOverlay = new google.maps.GroundOverlay(
      'http://www.sssss.fr/COPY/centre.gif',
      imageBounds);
  historicalOverlay.setMap(map);
 
 
 
 
 
}
 
 
 
 
 
 
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="maCarte"></div>
  </body>
</html>

Info window

Code php :

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
<?php
 
$fp = fopen("http://www.xxxxxxx.fr/TEST/bloc.txt", "r");
$coord=fread($fp,2000);fclose($fp);
$tab = split("x",$coord);
 
   // On identifie les valeurs intéressantes
   $cor1 = $tab[2];
   $cor2 = $tab[3];
   $stamp= $tab[4];
 
$stamp = substr("$stamp", 0,10); // ici le timestamp
$time=time();
$diff = ($time- $stamp)/60/60;
$hours = '2';
if ($hours > $diff)
{
$color=("red");
}
 
else
{
 
$color=("black");
 
}
 
?>
 
 
// création d'une infobulle et affichage
  var oInfo = new google.maps.InfoWindow({
    'content' : '<small><small><a href="http://www.xxxxxxx.fr/rr.php"><FONT COLOR="<?php echo"$color";?>" ><span style="font-weight: bold;">TEST</span></FONT></a></small></small>', // contenu qui sera affiché  
    'map' : maCarte,                                           // carte sur laquelle est affichée l'InfoWindow    
    'position' : new google.maps.LatLng(<?php echo "$cor1,$cor2";?>)       // position d'affichage de l'InfoWindow
  });

**NoSmoking** · 15/04/2014, 19h16

mais je n'arrive pas inclure mon info windows je ne vois pas ou cela bug

c'est le code HTML qu'il te faut regarder et analyser, celui généré par le PHP.

**loribac** · 16/04/2014, 01h00

Salut,

Voici le code html qui me semble bon mais ton avis sera le bienvenu

Code :

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

1
2
3
4
5
6
// création d'une infobulle et affichage
  var oInfo = new google.maps.InfoWindow({
    'content' : '<small><small><a href="http://www.mobxxxxxm.fr/lixxxx.php"><FONT COLOR="black" ><span style="font-weight: bold;">Mobxxxxx</span></FONT></a></small></small>', // contenu qui sera affiché  
    'map' : maCarte,                                           // carte sur laquelle est affichée l'InfoWindow    
    'position' : new google.maps.LatLng( 45.35290908813, 1.749806046485)       // position d'affichage de l'InfoWindow
  });

Bonne soirée

**NoSmoking** · 16/04/2014, 18h48

Le code que tu nous mets là est correct SAUF QUE...

..il faut regarder l'ENSEMBLE de la PAGE, pour voir la déclaration/ordre/cohérence et le reste des variables/fonctions.

par exemple que vaut maCarte dans ton code, si je m'en réfère aux bouts de code présentés ci avant maCarte n'est pas une variable déclarée.

Tu trouverais quand même avantage à te servir d'un debugger

Maîtriser Firebug, l'indispensable extension Firefox pour le développement web

**loribac** · 17/04/2014, 01h06

Bon il faut que se rendre a l’évidence je ne comprends pas donc je laisse le code et si une bonne âmes peut me dire ou ça bug. Je précise que dans le code html je ne trouve pas d'erreur mais mon info window ne s'affiche pas

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<!DOCTYPE html>
<html>
  <head>
<META http-equiv="Cache-Control" content="no-cache"> 
<META http-equiv="Pragma" content="no-cache"> 
<META http-equiv="Expires" content="0"> 
    <meta charset="utf-8">
    <title>Ground Overlays</title>
    <style>
      html, body, #maCarte {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
 
 
var historicalOverlay;
 
function initialize() {
 
  var France = new google.maps.LatLng(48,-0.7);
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(45.4389,-14.9515),
      new google.maps.LatLng(59.9934,20.4106));
 
  var mapOptions = {
   'Zoom': 6,
 'minZoom' : 4,
 'maxZoom' :11,  
 
 
    center: France 
 
 
 
 
  };
 
 
  var map = new google.maps.Map(document.getElementById('maCarte'),
      mapOptions);
 
  historicalOverlay = new google.maps.GroundOverlay('http://www.xxxxxx.fr/COPY/toto.gif?<?php echo time(); ?>',
      imageBounds);
  historicalOverlay.setMap(map);
 
 
 
 
 
 
 
 
 
 
 
/////////////////////////////////////////////////////////////////////// Loribac ///////////////////////////////////////////////////////////////////////
<?php
 
$fp = fopen("http://www.xxxxxxx.fr/format/zzz.txt", "r");
$coord=fread($fp,2000);fclose($fp);
$tab = split("x",$coord);
 
   // On identifie les valeurs intéressantes
   $cor1 = $tab[2];
   $cor2 = $tab[3];
   $stamp= $tab[4];
 
$stamp = substr("$stamp", 0,10); // ici le timestamp
$time=time();
$diff = ($time- $stamp)/60/60;
$hours = '0.30';
if ($hours > $diff)
{
$color=("red");
}
 
else
{
 
$color=("black");
 
}
 
?>
 
 
// création d'une infobulle et affichage
  var oInfo = new google.maps.InfoWindow({
    'content' : '<small><small><a href="http://www.ddddddd.fr/format/fffff.php/"><FONT COLOR="<?php echo"$color";?>" ><span style="font-weight: bold;">Moxxxxxorm</span></FONT></a></small></small>', // contenu qui sera affiché  
    'map' : maCarte,                                           // carte sur laquelle est affichée l'InfoWindow    
    'position' : new google.maps.LatLng(<?php echo "$cor1,$cor2";?>)       // position d'affichage de l'InfoWindow
  });
 
 
 
 
 
}
 
 
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="maCarte"></div>
  </body>
</html>

**NoSmoking** · 17/04/2014, 20h08

Bon il faut que se rendre a l’évidence je ne comprends pas donc je laisse le code et si une bonne âmes peut me dire ou ça bug. Je précise que dans le code html je ne trouve pas d'erreur mais mon info window ne s'affiche pas

est ce que simplement tu te donnes la peine de lire les réponses que l'on te fait

Envoyé par NoSmoking

par exemple que vaut maCarte dans ton code, si je m'en réfère aux bouts de code présentés ci avant maCarte n'est pas une variable déclarée.

**loribac** · 18/04/2014, 21h38

Bonsoir

1900 affichages , Soyez moins sec dans vos propos Mr NoSmoking je vous reconnais beaucoup de compétences mais de la mesure svp .... Allez savoir j'ai peut être des compétences dans d'autres domaines .....

Est ce ok comme déclaration de variable

var maCarte = new google.maps.Map(document.getElementById("maCarte"), mapOptions);

cordialement,

**NoSmoking** · 20/04/2014, 08h44

A ton avis que peux penser un intervenant qui prenant sur son temps pour répondre n'est pas lu/écouté ?

Cette discussion au demeurant intéressante, je rappelles le titre [Google Maps] Ajout d'une Image dans google Map qui peu justifier le nombre de visite à dérivé, une fois de plus, sur un problème basique du langage.

Depuis le temps que tu utilises l'API Google Map, as tu réellement été voir les objets et méthodes qu'elle mets à ta disposition, tu me permettra dans douter vu que tu nous ressort des codes appartenant à la V2 !

Depuis le temps que tu utilises le forum as tu seulement été lire les règles d'utilisations pour les appliquer, code mis en vrac et illisible au premier coup d'oeil pour les intervenants !

Depuis le temps que tu utilises le forum combien de messages édités faisant que le suivi du fil en devient parfois délicat ?

Depuis le temps que tu utilises le forum combien de discussion ont-elles dérivées sur un autre problème que celui initialement annoncé ?

Pour tout cela ne me demande pas de fiare des recherches pour te prouver tout cela, cette fois je n'aurais pas de temps à perdre cf ICI

Alors excuse moi d'être un peu sec

Mon rang actuel de modérateur fait que je ne suis que "sec" et cela aurait pu être largement pire, il serait peu être bon que je ne réponde plus à tes solicitations...

Pour conclure et pour ceux qui veulent intégrer une image

**loribac** · 14/05/2014, 14h14

Bonjour,

Voici dans le code de l'infowindows

Remplacer

Code :

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

1
2
3
4
5
6
7
 
'map' : maCarte, 
 
par
 
 
'map' : map,

Ajout d'une Image dans google Map [Google Maps]

APIs Google

Discussions similaires

Partager

Partager