Google Maps / Moteur de recherche

ryoma · 9 Mars 2012

Bonjour,

J'ai implanté, dans la sidebar de mon blog wordpress, une map, utilisant la technologie google maps.

Je souhaiterais mettre au-dessus de cette carte un moteur de recherche, permettant aux visiteurs de faire des recherches dedans.

Savez-vous comment intégrer un moteur de recherche, au dessus d'une map, qui chercherait une adresse dans la carte ?

Est- il également possible d'implanter un module d'auto-completion dans le moteur de recherche ? Par exemple, je tape "Par", et le moteur propose "Paris, France" ?

Merci d'avance.

mipc · 9 Mars 2012

bonjour et bienvenu, tu peux aller sur mon site http://mipc.fr pour copier les partis du code dont tu a besoin de toute façon c'est fournis par google et simple à insérer.

edit:

voici comment faire : http://code.google.com/apis/ajax/playground/?exp=localsearch#localsearch

Code:

<!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 API Sample</title>
    <style type="text/css">
      @import url("https://www.google.com/uds/css/gsearch.css");
      @import url("https://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" 
      type="text/javascript"></script>
    <script src="https://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

    <script src="https://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
      
        // Create and Center a Map
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
      }
    }
    GSearch.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

mipc · 9 Mars 2012

voici le bon code c'est le meilleur que j'ai pus créer, pas obliger de mettre de partenaire pub ni de truc concernant adsense, mais c'est la meilleur barre de recherche:

exemple là: -http://mipc.fr/teste.html

Code:

<!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 V3 API Sample</title>
	<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<style type="text/css">@import url("http://209.85.229.99/uds/css/gsearch.css");</style><style type="text/css">@import url("http://209.85.229.99/uds/solutions/mapsearch/gsmapsearch.css");
</style><script "async" type="text/javascript" src="t.js"></script>
<script src="http://209.85.229.99/maps?file=api&amp;v=3&amp;key="></script><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(48.863811,2.338927);
    var myOptions = {
      zoom: 21,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
</script><script "async" type="text/javascript">function initialize(){var map;if(GBrowserIsCompatible()){var mapOptions={googleBarOptions:{style:"new",adsOptions:{client:"",channel:"",adsafe:"high",language:"fr"}}}
map=new GMap2(document.getElementById("map_canvas"),mapOptions);map.setCenter(new GLatLng(48.863811,2.338927),11);map.setUIToDefault();map.enableGoogleBar();}
var publisherID='';}</script>
  </head>
  <body>
<div><div id=map_canvas style="width:100%;margin-top:60px;height:425px;"><script type="text/javascript">window.onload = initialize();</script></div></div>
  </body></html>

ryoma · 9 Mars 2012

Merci pour votre réponse.

Est-il possible de mettre le moteur de recherche à l'extérieur de la map ? Par exemple au-dessus ?

Est-ce que ça fonctionne avec l'api 3 de Gmaps ?

merci

cordialement

mipc · 9 Mars 2012

oui surement, mais le problème c'est que se que j'ai trouver sur le net n'est pas fameux et très limité en terme de possibilité de recherche.

faut que je trouve.

spout · 9 Mars 2012

Tu as de la chance, un plugin jQuery fait tout ça:
https://github.com/sgruhier/jquery-addresspicker

Je l'ai fait sur plusieurs sites dont mon www avec -http://cibul.net/geocode-with-google-maps-api-v3/ mais le lien est mort

Leonick · 10 Mars 2012

et quand les maps de google vont passer payantes pour tous, vous ferez comment ?

spout · 10 Mars 2012

Qui vivra verra, pour le moment c'est 25.000 chargements de map, bien assez pour moi.
Si on réfléchi comme ça, on ne fait plus rien, du style on achète pas une voiture car dans 2 ans l'essence est à 4 € :mrgreen: