Utiliser le gestionnaire de marqueurs sur API Google Maps.

RPGamer Messages postés 10 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 25 juillet 2008 - 7 juil. 2008 à 22:00
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 25 juil. 2008 à 21:22

Salut à tous ^^

Je suis en train de développer un site afin de localiser les places de parking sur une carte de l'API Google Maps.

Les marqueurs s'affichent correctement, seulement ils sont traités un par un par le code et donc l'affichage peut être assez lent si beaucoup de marqueurs sont présents.

N'étant pas un pro du JavaScript, je n'arrive pas à saisir comment adapter mon code pour utiliser le gestionnaire de marqueurs de Google Maps. La documentation en anglais ne me facilite pas la chose.

Pour commencer, voici mon code :

<script language= "javascript" type="text/javascript">
// API Google Maps
var map_search = null;
var geocoder = null;
var bulle = null;

function load() {
    if (GBrowserIsCompatible()) {

        map_search = new GMap2(document.getElementById("map_search"));
        map_search.addControl(new GLargeMapControl());
        geocoder = new GClientGeocoder();
    }
}

function showAddress(id, address) {

    geocoder = new GClientGeocoder();

    if (geocoder) {

        geocoder.getLatLng(

            address,

            function(point) {

                   if (!point) {

                    document.getElementById('map_search').style.display = 'none';
                }

                else {

                    var icon = new GIcon();
                    icon.image = "design/icon/parking.gif";
                                        if (id 0) { var options { icon: icon, draggable: true }; }
                    else { var options = { icon: icon, draggable: false }; }

                    icon.shadow = "design/icon/shadow.png";
                    icon.iconSize = new GSize(20, 20);
                    icon.shadowSize = new GSize(37, 34);
                    icon.iconAnchor = new GPoint(6, 20);
                    icon.infoWindowAnchor = new GPoint(5, 1);
                    icon.infoShadowAnchor = new GPoint(5, 1);

                    map_search.setCenter(point, 14);

                          var marker = new GMarker(point, options);
                          map_search.addOverlay(marker);

                        if (id == 0) {

                            marker.setImage("design/icon/cible.gif");
                            bulle = '
<?php echo $langue['mapsearch_info_1']; ?> '+ address +' .

<?php echo $langue['mapsearch_info_2']; ?>
';
                            marker.openInfoWindowHtml(bulle);
                            document.getElementById('error').innerHTML = '<?php echo $langue['mapsearch_error']; ?>';
                        }

                        else {

                            GEvent.addListener(marker, "mouseover", function() {
                                marker.setImage("design/icon/parking_over.gif");
                                document.getElementById(id).style.backgroundColor = '#0065b7';
                                document.getElementById(id).style.color = '#fff';
                            });

                            GEvent.addListener(marker, "mouseout", function() {
                                marker.setImage("design/icon/parking.gif");
                                document.getElementById(id).style.backgroundColor = '';
                                document.getElementById(id).style.color = '';
                            });

                            GEvent.addListener(marker, "click", function() {
                                window.location.replace("detail-"+ id +".html");
                            });
                        }

                }
              }
           );
    }
}
</script>

Actuellement, pour afficher un marqueur, j'utilise le code suivant dans la page :

<script language="javascript">
load();

showAddress(id, "Adresse du marqueur");
</script>

Je répéte la fonction showAddress()
autant de fois qu'il y a de marqueur avec une boucle en PHP.

Si l'ID vaut zéro, il s'agit en faite du point de recherche pour le moteur de recherche. Je traite donc ce marqueur différemment et en dernier.

"map_search" est

le nom de la
affichant la map.

J'imagine qu'en regroupant tous les marqueurs et en les affichant tous au même moment, je n'aurait plus de problème au chargement de la map.

Si vous avez des idées, merci d'avance

A voir également:

Google maps javascript api
Api google maps - Conseils pratiques -PHP
Récupérer données json (javascript) - Conseils pratiques -Javascript
Poo javascript - Conseils pratiques -Javascript
Google maps api adresse ✓ - Forum Java
Google map distance entre deux points - Forum PHP

6 réponses

Réponse 1 / 6

RPGamer Messages postés 10 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 25 juillet 2008
8 juil. 2008 à 19:59

Désolé, j'ai oublié de mettre le lien vers la doc officielle :
http://code.google.com/apis/maps/documentation/overlays.html#Marker_Manager

Réponse 2 / 6

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
9 juil. 2008 à 13:13

traduire la page avec google

Réponse 3 / 6

RPGamer Messages postés 10 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 25 juillet 2008
10 juil. 2008 à 08:53

Merci pour ton aide
J'avai déjà pensé à faire traduire la page avec Google Translate ou Babel Fish, mais c'est presque plus compréhensible en version originale xD

J'ai quand essayé d'ajouter le bout de code de la doc à mon propre code. Voici ce que ça donne :

<script type= "text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
<script language="javascript" type="text/javascript">
// API Google Maps
var map_search = null;
var geocoder = null;
var bulle = null;

function load() {
if (GBrowserIsCompatible()) {

    map_search = new GMap2(document.getElementById("map_search"));
  map_search.addControl(new GLargeMapControl());
    geocoder = new GClientGeocoder();
  mgr = new MarkerManager(map_search);
  mgr.addMarkers(getMarkers(20), 3);
  mgr.addMarkers(getMarkers(200), 6);
  mgr.addMarkers(getMarkers(1000), 8);
  mgr.refresh();
}
}

function showAddress(id, address) {

geocoder = new GClientGeocoder();

if (geocoder) {

  geocoder.getLatLng(

   address,

     function(point) {

       if (!point) {

       document.getElementById('map_search').style.display = 'none';
    }

    else {

     var icon = new GIcon();
     icon.image = "design/icon/parking.gif";
          if (id 0) { var options { icon: icon, draggable: true }; }
     else { var options = { icon: icon, draggable: false }; }

     icon.shadow = "design/icon/shadow.png";
     icon.iconSize = new GSize(20, 20);
     icon.shadowSize = new GSize(37, 34);
     icon.iconAnchor = new GPoint(6, 20);
     icon.infoWindowAnchor = new GPoint(5, 1);
     icon.infoShadowAnchor = new GPoint(5, 1);

       map_search.setCenter(point, 14);

      function getMarkers(n) {

       var batch = [];

       for (var i = 0; i < n; ++i) {

        batch.push(new GMarker(point, options);
       }

       return batch;
      }



map_search.addOverlay(batch);

      if (id == 0) {

       marker.setImage("design/icon/cible.gif");
       bulle = '
<?php echo $langue['mapsearch_info_1']; ?> '+ address +' .

<?php echo $langue['mapsearch_info_2']; ?>
';
       marker.openInfoWindowHtml(bulle);
      }

      else {

       GEvent.addListener(marker, "mouseover", function() {
        marker.setImage("design/icon/parking_over.gif");
        document.getElementById(id).style.backgroundColor = '#0065b7';
        document.getElementById(id).style.color = '#fff';
       });

       GEvent.addListener(marker, "mouseout", function() {
        marker.setImage("design/icon/parking.gif");
        document.getElementById(id).style.backgroundColor = '';
        document.getElementById(id).style.color = '';
       });

       GEvent.addListener(marker, "click", function() {
                 window.location.replace("detail-"+ id +".html");
             });
      }

          }
        }
     );
}
}
</script>

Là , rien ne s'affiche, même pas la carte. Apparemment, batch est un tableau qui contient tous les marqueurs. Le niveau de zoom s'adapte en fonction du nombre de marqueur (20, 200 ou 1000). Je pense que c'est au niveau de l'élément en gras que ça coince...

Réponse 4 / 6

RPGamer Messages postés 10 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 25 juillet 2008
22 juil. 2008 à 11:10

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

RPGamer Messages postés 10 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 25 juillet 2008
25 juil. 2008 à 19:38

Réponse 6 / 6

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
25 juil. 2008 à 21:22

and down

Discussions similaires

Utilisation API Google maps (javascript) avec des données en PHP

API google map

Google maps api mysql J2EE

comment integrer google maps dans un site web

Google Maps API & PHP

Votre réponse

Discussions similaires