Ajout d'une Image dans google Map

Version imprimable

13/04/2014, 17h13
loribac

Ajout d'une Image dans google Map

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
14/04/2014, 03h38
TiranusKBX

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é

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:

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

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:

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>

14/04/2014, 19h09
NoSmoking

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.

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:

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:

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

15/04/2014, 19h16
NoSmoking

Citation:

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.

Salut,

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

Code:

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

16/04/2014, 18h48
NoSmoking

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
:fleche: Maîtriser Firebug, l'indispensable extension Firefox pour le développement web

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:

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>

17/04/2014, 20h08
NoSmoking

Citation:

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 :calim2:

Citation:

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.
18/04/2014, 21h38
loribac

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,
20/04/2014, 08h44
NoSmoking

Reflexions diverses :
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
- :fleche: documentation GroundOverlay
- :fleche: Example GroundOverlay
14/05/2014, 14h14
loribac
Bonjour,

Voici dans le code de l'infowindows

Remplacer
Code:

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