API Gmaps - Clustering de positions enregistré dans une bd MySQL

dav3net Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
dav3net Messages postés 2 Date d'inscription Statut Membre Dernière intervention - 22 août 2015 à 20:23

Bonjour,

Après de longues heures d'arrachage de cheveux, je me tourne vers la communauté pour m'aider à solutionner mon problème.

J'ai des points de coordonnées dans une base de données MySQL que j'affiche sur une carte grâce à l'API Gmaps et au tuto suivant tuto1 : https://developers.google.com/maps/documentation/javascript/mysql-to-maps

Je souhaite regrouper les markers en clusters pour améliorer l'affichage avec la bibliothèque suivante :
tuto1 : https://developers.google.com/maps/documentation/javascript/marker-clustering#markerclusterer
Source : https://github.com/googlearchive/js-marker-clusterer
Exemples : https://googlemaps.github.io/js-marker-clusterer/docs/examples.html

Pour résumer je souhaite faire des deux codes suivant, un seul pour l'affichage de la carte :
code tuto1 db MySQL

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript">
    //<![CDATA[
 
    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }
 
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function doNothing() {}
 
    //]]>
 
  </script>
 
  </head>
 
  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
 
</html>

code tuto2 Clustering

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MarkerClusterer v3 Simple Example</title>
    <style >
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="data.json"></script>
    <script>
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-12846745-20']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <p>
      <a href="?compiled">Compiled</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Merci par avance pour tout coup de main ! ;)

Afficher la suite

A voir également:

API Gmaps - Clustering de positions enregistré dans une bd MySQL
Positions google - Guide
Mot de passe enregistré android - Guide
Mysql community server - Télécharger - Bases de données
Comment enregistrer une conversation - Guide
W.i.t.c.h. bd intégrale pdf - Forum Liseuse eBook

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Salut,

Où est-ce que tu bloques exactement ? L'utilisation de MarkerClusterer est relativement simple. A l'initialisation :
1. Créer un tableau javascript pour stocker les markers
2. A la création de chaque marker, on l'ajoute dans le tableau
3. On crée un objet MarkerClusterer en passant en paramètre l'objet Map et le tableau des markers.

Bon développement,

Réponse 2 / 2

dav3net Messages postés 2 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup Pitet,
oui en effet rien de sorcier ! Mais je ne connais pas le javascript et avec les fonctions d'infowindow et autres je m'emmêlais les pinceaux.

Bref, merci à google qui m'a répondu ici : https://accounts.google.com/ServiceLogin?passive=1209600&continue=https://issuetracker.google.com/code/p/gmaps-api-issues/issues/detail?id%3D8478%26thanks%3D8478%26ts%3D1439665354&followup=https://issuetracker.google.com/code/p/gmaps-api-issues/issues/detail?id%3D8478%26thanks%3D8478%26ts%3D1439665354
(je n'ai pas réussi à faire fonctionner le code mis en réponse mais sur https://github.com/googlearchive/js-marker-clusterer/tree/gh-pages/examples

Pour ceux à qui cela peut servir :

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml3.php", function(data) {
        var xml = data.responseXML;
		var clusteredmarkers = [];
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
		  clusteredmarkers.push(marker);
          bindInfoWindow(marker, map, infoWindow, html);
        }
		var markerCluster = new MarkerClusterer(map,clusteredmarkers);//this also add the cluster to the map
      });
    }

Ne pas oublier d'initialiser le script de clustering :

<script>
      var script = '<script type="text/javascript" src="src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

dont vous trouverez la source ici https://github.com/googlearchive/js-marker-clusterer

Bon dev à tous !

API Gmaps - Clustering de positions enregistré dans une bd MySQL

2 réponses

Votre réponse

Discussions similaires