Google map - intégrer une fonction "recherche" à une carte

**jeanflo037** · 02/07/2008, 12h35

Bonjour,

Je souhaite intégrer une "fonction recherche" à une carte google maps.

Comme ceci : http://www.dogcat.com/girault/kml/kml.html

Je n'arrive pas a faire fonctionner la fonction "recherche"

Voici mon code :

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
<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
	    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA5byDfrX5Z5lGBcj1fakhMBQqZX3XTWzFjizJhR1Pwx2QmEgLeRRF3gxglOudScvSg-K4_hicCi1cDA"
            type="text/javascript"></script>
    <script type="text/javascript">
 
 
 
var map;
var geoXml;
 
function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas")); 
    geoXml = new GGeoXml("http://www.dogcat.com/girault/kml/import.kml");
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(48.856667,2.350987), 6); 
    map.addControl(new GLargeMapControl());
    map.addOverlay(geoXml);
  }
} 
 
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="30" name="address" value=" " />
        <input type="submit" value="Trouver le r&eacute;f&eacute;rent le plus proche de chez moi!" />
      </p>
      <div id="map_canvas" style="width: 750px; height: 750px"></div>
    </form>
 
  </body>
</html>

Où est mon erreur ? je précise que je ne suis pas un expert...
Merci pour votre aide à venir.

**jeanflo037** · 03/07/2008, 10h45

Bonjour,

Voici la solution :

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
<!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=iso-8859-1
	"/>
    <title>Google Maps API Example: Simple Geocoding</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA5byDfrX5Z5lGBcj1fakhMBQqZX3XTWzFjizJhR1Pwx2QmEgLeRRF3gxglOudScvSg-K4_hicCi1cDA" type="text/javascript"></script>
    <script type="text/javascript">
 
    var map;
    var geocoder = null;
	var geoXml;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map_canvas")); 
    geoXml = new GGeoXml("http://www.dogcat.com/girault/referent/import01.kml");
    geocoder = new GClientGeocoder();
    map.setCenter(new GLatLng(47.07500000,2.39861000), 6); 
    map.addControl(new GLargeMapControl());
    map.addOverlay(geoXml);
      }
    }
 
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " d&eacute;sol&eacute;, google map n'a pas trouv&eacute; votre adresse");
            } else {
              map.setCenter(point, 9);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
 
    </script>
  </head>
 
  <body onload="initialize()" onunload="GUnload()">
    <strong>Entrez</strong> le <strong>nom de votre ville</strong> dans la case ci-dessous pour trouver le<strong> r&eacute;f&eacute;rent </strong><a href="http://www.vivog.fr" title="Cliquez ici pour dÚcouvrir nos accessoires chiens et chat" target="_blank">www.vivog.fr</a><strong> le plus proche de chez vous</strong>
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="35" name="address" value="" />
        <input type="submit" value="Rechercher" />
      </p>
	  utilisez la fonction recherche car la carte n'affiche que 200 rÚfÚrents Ó la fois (certains sont donc "cachez"!)
      <div id="map_canvas" style="width: 650px; height: 650px"></div>
  </form>
  </body>
</html>

J'espère que cela sera utile à d'autres.
PS : ne faites pas attention à l'accentuation car j'ai fait un copier collé depuis 1 mac.

Google map - intégrer une fonction "recherche" à une carte

JavaScript

Discussions similaires

Partager

Partager