IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Api google maps, marker cluster et infowindows
Options
hellomorld
posté 18 Sep 2011, 18:17
Message #1


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 144
Inscrit : 31 Oct 2003
Membre no 11 118



Bonjour,

Soit une carte google maps avec des données issues d'une base de données, regroupées avec markerclusterer.

http://www.botanic06.com/testmaps.php

Ca marche, mais j'aimerais pour afficher des infos sur les "punaises".
Les coordonnées et le nom à afficher des points sont dans un fichier .json.

Quelqu'un a un code pour cela, j'ai beau fouillé le web, je ne trouve pas de solutions adaptables à mon script que voici :
Code
<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test</title>

    <style type="text/css">
      html{height: 100%}
     body{height: 100%; margin: 0px; padding: 0px}
     #map{height: 100%}
    </style>

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

    <script type="text/javascript">

      function initialize() {
        var center = new google.maps.LatLng(43.84, 6.8);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: center,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var markers = [];
        for (var i = 0; i < data.compte; 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>
  </head>
  <body>
    
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>


--------------------
Go to the top of the page
 
+Quote Post
hellomorld
posté 19 Sep 2011, 06:02
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 144
Inscrit : 31 Oct 2003
Membre no 11 118



J'ai trouvé une solution :

Code
<script type="text/javascript">
        var infowindow = null;
      function initialize() {
        var center = new google.maps.LatLng(43.84, 6.8);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: center,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });
infowindow = new google.maps.InfoWindow({
content: "holding..."
});

        var markers = [];
        for (var i = 0; i < data.compte; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
              
          var marker = new google.maps.Marker({
            position: latLng,
            html : dataPhoto.nom
          });
          
          google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.html);
infowindow.open(map, this);
});    
          
          markers.push(marker);
        }
        
        
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


--------------------
Go to the top of the page
 
+Quote Post
def16
posté 14 Sep 2017, 10:23
Message #3


Nouveau Membre


Groupe : Membres
Messages : 1
Inscrit : 14 Sep 2017
Membre no 203 256



Salut tu peut me montrer a quoi ressemble ton fichier json ? Car j'essaie de faire la même chose une base de donnée MySQlou je veux récupérer les informations en JSON. Merci
Go to the top of the page
 
+Quote Post
Jaypee
posté 15 Sep 2017, 06:24
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 2 486
Inscrit : 29 Aug 2002
Membre no 3 340



Dans l'exemple il n'y a pas de JSON ni d'appel d'API visible, on est plus dans une approche bibliothèque et objets distribués client/serveur (comparable à JEE)

Pour une architecture web basée sur des REST API, Google n'est pas le meilleur choix, Bing dans ce cas serait préférable : https://msdn.microsoft.com/en-us/library/ff701713.aspx
Pour les markers (PushPins chez Bing) voir ici: https://msdn.microsoft.com/en-us/library/ff701724.aspx

J-P

Ce message a été modifié par Jaypee - 15 Sep 2017, 06:30.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 19th March 2024 - 02:58