Markers googlemap et table mysql + zoom

Fermé

ML2000 Messages postés 9 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 8 juin 2010 - 28 mai 2010 à 09:58
ML2000 Messages postés 9 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 8 juin 2010 - 30 mai 2010 à 19:16

Bonjour à tous,

Je sollicite votre aide précieuse car je galère un peu beaucoup depuis quelques jours. Je n'arrive pas (car pas assez de connaissances sur ce sujet) à lier mes 4 marqueurs personnalisés à une table mysql selon un critère défini (ici "type" qui contient donc 4 types de lieux). J'arrive seulement à afficher tous mes marqueurs avec l'icone rouge de base.

Voici mon code (pas de lien car je suis encore sur le local!):

<html>

<head>
<title>Lieux touristiques</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=A---A"
      type="text/javascript"></script>

<img src="images/Logo_P.jpg" alt="" style="border: 0px solid ; width: 120px; height: 100px;" /><br/>   
<center><p><strong><H1>Localisations des lieux</H1></strong></p></center>

<FORM METHOD="POST" ACTION="essai_rechercher.php">
  <p><center>
Nom :           <INPUT type="text" size="10" name="marecherche">
        <INPUT type="submit" value="Rechercher">
  </p></center>

<center>
<div class="boxc">
    <img src="images/miniRed.png" height="18px" width="15px" />Exceptionnel: <input type="checkbox" id="Rougebox" onclick="boxclick(this,'Rouge')" />&nbsp;&nbsp;&nbsp;
    <img src="images/miniGreen.png" height="18px" width="15px" />Magnifique: <input type="checkbox" id="Vertbox" onclick="boxclick(this,'Vert')" />&nbsp;&nbsp;&nbsp;
    <img src="images/miniBlue.png" height="18px" width="15px" />Beau: <input type="checkbox" id="Bleubox" onclick="boxclick(this,'Bleu')" />&nbsp;&nbsp;&nbsp;
    <img src="images/miniOrange.png" height="18px" width="15px" />A voir: <input type="checkbox" id="Orangebox" onclick="boxclick(this,'Orange')" />&nbsp;&nbsp;&nbsp;
</div>
<div id="map" style="width: 680px; height: 650px"></div>
</center> 

</head>

<body>

<script type="text/javascript">
//<![CDATA[
var map;
var geocoder = null;
var geoXml;

map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(47.082892, 2.3965788), 6);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
geoXml = new GGeoXml("http://www.dogcat.com/girault/referent/import01.kml");
geocoder = new GClientGeocoder();
map.addOverlay(geoXml);


// Creates a marker whose info window displays the given number
function createMarker(point, number) {
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};

//marqueur_rouge
var Redicon = new GIcon();
Redicon.iconSize=new GSize(12,20);
Redicon.shadowSize=new GSize(20,22);
Redicon.iconAnchor=new GPoint(6,20);
Redicon.infoWindowAnchor=new GPoint(5,1);
Redicon.image = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png";
Redicon.shadow = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png";
var geysir = new GLatLng(46.082892, 1.3965788) ;
   markerOptions = { icon:Redicon }; // Set up our GMarkerOptions object
   map.addOverlay(new GMarker(geysir, Redicon));
   
//marqueur_vert
var Greenicon = new GIcon();
Greenicon.iconSize=new GSize(12,20);
Greenicon.shadowSize=new GSize(20,22);
Greenicon.iconAnchor=new GPoint(6,20);
Greenicon.infoWindowAnchor=new GPoint(5,1);
Greenicon.image = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png";
Greenicon.shadow = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png";
var geysir = new GLatLng(47.082892, 2.3965788) ;
   markerOptions = { icon:Greenicon }; // Set up our GMarkerOptions object
   map.addOverlay(new GMarker(geysir, Greenicon));
   
//marqueur_bleu
var Blueicon = new GIcon();
Blueicon.iconSize=new GSize(12,20);
Blueicon.shadowSize=new GSize(20,22);
Blueicon.iconAnchor=new GPoint(6,20);
Blueicon.infoWindowAnchor=new GPoint(5,1);
Blueicon.image = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png";
Blueicon.shadow = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png";
var geysir = new GLatLng(48.082892, 3.3965788) ;
   markerOptions = { icon:Blueicon }; // Set up our GMarkerOptions object
   map.addOverlay(new GMarker(geysir, Blueicon));

//marqueur_orange
var Orangeicon = new GIcon();
Orangeicon.iconSize=new GSize(12,20);
Orangeicon.shadowSize=new GSize(20,22);
Orangeicon.iconAnchor=new GPoint(6,20);
Orangeicon.infoWindowAnchor=new GPoint(5,1);
Orangeicon.image = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_orange.png";
Orangeicon.shadow = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png";
var geysir = new GLatLng(49.082892, 4.3965788) ;
   markerOptions = { icon:Orangeicon }; // Set up our GMarkerOptions object
   map.addOverlay(new GMarker(geysir, Orangeicon));

<?php
$link = mysql_connect("localhost", "root", "") or die("Could not connect: " . mysql_error());
mysql_selectdb("lieux",$link) or die ("Can\'t use dbmapserver : " . mysql_error());

$result = mysql_query("SELECT * FROM lieux",$link);
if (!$result)
{
echo "no results ";
}
while($row = mysql_fetch_array($result))
{
echo "var point = new GLatLng(" . $row['LAT'] . "," . $row['LNG'] . ");\n";
echo "var marker = createMarker(point, '" . addslashes($row['num'] ).' ', addslashes($row['nom'] ).' ', addslashes($row['ville'] ).' ',addslashes($row['type'] ), "' );\n";
//? echo "var Redicon=(['type']='Excep');\n";
//? echo "var Greenicon=(['type']='Mag');\n";
//? echo "var Blueicon=(['type']='Beau');\n";
//? echo "var Orangeicon=(['type']='Voir');\n";
echo "map.addOverlay(marker, Redicon, Greenicon, Blueicon, Orangeicon);\n";
echo "\n";
}

mysql_close($link);
?>

      function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " Desole, google map n'a pas trouve votre adresse");
            } else {
              map.setCenter(point, 12);
            }
          }
        );
      }
    }
//]]>
</script>

   <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p><center>
        Nom de la ville: <input type="text" size="35" name="address" value="" />
        <input type="submit" value="Rechercher" />
      </center></p>
  </form>

<center>
  <li><a href="affichage.php" title="">Liste des lieux touristiques</a></li>
</center>
  
</body>
</html>

J'espère que le code sera assez lisible car j'ai pas mal farfouillé à droite et gauche sur le net pour le faire. Car cet API est vraiment top!

De plus, vous avez pu remarquer que j'essaie aussi de faire une recherche à partir du nom du lieu touristique (un peu comme la recherche par ville). Comment faire pour lier cette recherche (en rapport avec la table mysql) à la carte? J'aimerais qu'un zoom sur la carte apparaissent sur le lieu recherché.

Je vous remercie d'avance pour votre aide précieuse, j'en suis certaine.
ML2000

A voir également:

Markers googlemap et table mysql + zoom
Table ascii - Guide
Table des matières word - Guide
Zoom pour pc - Télécharger - Téléphonie & Visio
Mysql community server - Télécharger - Bases de données
Zoom ecran pc - Guide

1 réponse

Réponse 1 / 1

ML2000 Messages postés 9 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 8 juin 2010
30 mai 2010 à 19:16

Bonsoir à tous,

Personne n'aurait une petite idée pour m'aider?

Merci!

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

Intégrer une table des annexes et des matières sur word

Création du sommaire sous Word

erreur système(zoom) sur appareil photo numerique panasonic