Markers googlemap et table mysql + zoom

ML2000 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
ML2000 Messages postés 9 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Markers googlemap et table mysql + zoom
Table ascii - Guide
Table des matières word - Guide
Zoom appel video - Guide
Télécharger zoom gratuit pour pc - Télécharger - Téléphonie & Visio
Zoom ecran pc - Guide

1 réponse

Réponse 1 / 1

ML2000 Messages postés 9 Date d'inscription Statut Membre Dernière intervention

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

insérer une table d'illustration

Votre réponse

Discussions similaires