intégration google maps

**vincent694** · 13/07/2008, 14h48

Bonjour à tous

Je suis en train d'intéger googlmaps dans un site.

Quand je laisse un formulaire

Code :

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

1
2
3
4
<form name="tmpform" onsubmit="showAddress(this.sear.value); return false"> 
<input id="sear" size="40" type="text" value="" title="" > 
<input type="submit" value="Enter" title=""> 
</form>

ca marche nickel.

Mais j'aimerais me passer du form, le but étant d'afficher la carte directement en fonction de la bdd, sans aucun clic

J'ai bien tenté

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript" language="Javascript">
 
<!--
showAddress('n_importe_quelle_adresse'); 
 
-->
</script>

ca ne fonctionne pas

Si qqun à une idée

Note :
- pas d'url, car travail en localhost

**SpaceFrog** · 13/07/2008, 21h03

essaye de passer par le onload, la fonction faisant peut être appel à des objets non encore instanciés ??

tu as un message d'erreur ?

**vincent694** · 13/07/2008, 22h56

Merci

Mais le onload est trop haut dans la construction de ma page.

Ou alors je devrais tt réécrire, faire un pré-traitement sql, et tt mettre dans des array.

de plus, mon unload est <body onload="initialize()" onunload="GUnload()"> (classique pour googlemaps)

quand je débugge, effectivement, le geocoder n'est pas encore chargé, puisqu'un alert après le if ne donne rien. alors qu'après le submit bien...

**Antoine Galmiche** · 13/07/2008, 23h15

Les trois variables map, geocoder et le tableau contenant la liste d'adresse doivent être déclarées hors fonctions dans le script js, afin d'être globales : vues par tous les scripts.

**vincent694** · 14/07/2008, 00h08

heu...

dsl, je capte pas

quand je fais un appel de la fonction via javascript au lieu de form, tt est déjà déclaré, non ?

Et puis quelle est la != entre un form et un js ?

Invité · 14/07/2008, 00h28

Bonsoir,

Des infos ICI

Plein de tutos LA. Commence par le premier !

Cela devrait d'aider...

A+

**vincent694** · 14/07/2008, 07h16

C'est gentil, merci.

Mais google est aussi mon ami, et j'avais déjà lu ces pages là.

Et je ne vois tj pas en quoi un js qui apelle une fonction est différent d'un form qui apelle cette même fonction

**SpaceFrog** · 14/07/2008, 08h28

le fait que le onunload soit plus haut dans la page n'a aucune espèce d'importance !!!!!!!

lancer une fonction dans le onload permet d'être sur que tous les objet de la page sont instanciés ...

Code :

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

<body onload="initialize();showAddress('n_importe_quelle_adresse'); " onunload="GUnload()">

et si cela ne fonctionne pas il faudra mettre un setTimeout sur le showAddress

Invité · 14/07/2008, 12h44

Bonjour,

Je pense que cela vient de la portée des variables.

Un exemple qui focntionne sans FORM

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
 
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAArIk5ozMi-vzRrSVPw2MdXBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRXkpZBMkE3ZF8zb1bTOZ8KKwjEOw" type="text/javascript"></script>
 
  </head>
  <body onload="" onunload="GUnload()">
 
    <div id="map" style="width: 800px; height: 600px"></div><p>
      <input id="search" size="60" type="text" >
      <input type="button" size="3" value="Go" onclick="showAddress(); return false">
      <input type="button" onclick="javascript:map.clearOverlays();" value="Clear markers">
    <div id="message"></div>
 
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>
 
  </body>
 
<script type="text/javascript">
    //<![CDATA[
 
 
 
  if (GBrowserIsCompatible()) {
 
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(20,0),2);
 
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder();
 
      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
 
      // ====== Geocoding ======
 
  function showAddress() {
        var search = document.getElementById("search").value;
        // ====== Perform the Geocoding ======
        geo.getLocations(search, function (result)
          {
            // If that was successful
            if (result.Status.code == G_GEO_SUCCESS) {
              // How many resuts were found
              document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results";
              // Loop through the results, placing markers
              for (var i=0; i<result.Placemark.length; i++) {
                var p = result.Placemark[i].Point.coordinates;
                var marker = new GMarker(new GLatLng(p[1],p[0]));
                document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
                map.addOverlay(marker);
              }
              // centre the map on the first result
              var p = result.Placemark[0].Point.coordinates;
              map.setCenter(new GLatLng(p[1],p[0]),14);
            }
            // ====== Decode the error status ======
            else {
              var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              }
              alert('Could not find "'+search+ '" ' + reason);
            }
          }
        );
  }
 
    }
 
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
 
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://econym.googlepages.com/index.htm
 
    //]]>
</script>
</html>

Tout est déclaré après </body>.
Deplus sous IE7, map doit être déclarée avec var, sinon pas d'affichage de la carte. (?)

A+

Invité · 14/07/2008, 12h46

Envoyé par Antoine Galmiche

Les trois variables map, geocoder et le tableau contenant la liste d'adresse doivent être déclarées hors fonctions dans le script js, afin d'être globales : vues par tous les scripts.

Bonjour,

Je pense que cela vient de la portée des variables.

Un exemple qui focntionne sans FORM

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
 
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAArIk5ozMi-vzRrSVPw2MdXBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRXkpZBMkE3ZF8zb1bTOZ8KKwjEOw" type="text/javascript"></script>
 
  </head>
  <body onload="" onunload="GUnload()">
 
    <div id="map" style="width: 800px; height: 600px"></div><p>
      <input id="search" size="60" type="text" >
      <input type="button" size="3" value="Go" onclick="showAddress(); return false">
      <input type="button" onclick="javascript:map.clearOverlays();" value="Clear markers">
    <div id="message"></div>
 
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>
 
  </body>
 
<script type="text/javascript">
    //<![CDATA[
 
 
 
  if (GBrowserIsCompatible()) {
 
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(20,0),2);
 
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder();
 
      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
 
      // ====== Geocoding ======
 
  function showAddress() {
        var search = document.getElementById("search").value;
        // ====== Perform the Geocoding ======
        geo.getLocations(search, function (result)
          {
            // If that was successful
            if (result.Status.code == G_GEO_SUCCESS) {
              // How many resuts were found
              document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results";
              // Loop through the results, placing markers
              for (var i=0; i<result.Placemark.length; i++) {
                var p = result.Placemark[i].Point.coordinates;
                var marker = new GMarker(new GLatLng(p[1],p[0]));
                document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
                map.addOverlay(marker);
              }
              // centre the map on the first result
              var p = result.Placemark[0].Point.coordinates;
              map.setCenter(new GLatLng(p[1],p[0]),14);
            }
            // ====== Decode the error status ======
            else {
              var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              }
              alert('Could not find "'+search+ '" ' + reason);
            }
          }
        );
  }
 
    }
 
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
 
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://econym.googlepages.com/index.htm
 
    //]]>
</script>
</html>

Tout est déclaré après </body>.
Deplus sous IE7, map doit être déclarée avec var, sinon pas d'affichage de la carte. (?)

A+

**vincent694** · 14/07/2008, 12h57

Merci.

pour le unload, dsl, faute de frappe

Par contre, le timer, c'est nickel

j'ai donc (bien plus bas dans ma page que la balise body)

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript" language="Javascript">
 
<!--
 setTimeout("showAddress('<? echo $row['adresse'].' , '.$row['codepostal'].' '.$row['ville'].')';?>','')",500); 
 
-->
</script>

Et hop, la carte se charge

Un grand merci

intégration google maps [Google Maps]

APIs Google

Discussions similaires

Partager

Partager