Marqueurs de Google Maps, infowindow, input XML, Fluster2

Jusqu'à présent, et grâce à duncan, la plupart de mes questions sont résolues. Mais je suis venu à un nouveau problème ... Il semble que je dois étudier jquery plus loin ...Marqueurs de Google Maps, infowindow, input XML, Fluster2

J'ai trouvé un outil intéressant pour la mise en cluster. Fluster2 semble utile, mais aucune information sur la façon de l'utiliser ... Aucun des exemples que je réussi à trouver en ligne, donner des explications comment utiliser Fluster2 avec jquery ...

Ci-dessous mon code ...

<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>My map</title> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="util.js"></script> 
<script type="text/javascript"> 
    google.load("maps", "3", {other_params : "sensor=false"}); 
    google.load("jquery", "1.3.2"); 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(39.5, 25.1419); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    jQuery.get("genXML.php", {}, function(data) { 
     jQuery(data).find("marker").each(function() { 
      var marker = jQuery(this); 
      var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng"))); 
      var shop_type = parseInt(marker.attr("type"), 10); 
      var address = marker.attr("address"); 
      var magazi = marker.attr("name"); 
      var city = marker.attr("city"); 
      var area = marker.attr("area"); 
      var tk = marker.attr("postal"); 

      switch(shop_type) { 
       case 0: 
        typos = "Something"; 
        break; 
       case 1: 
        typos = "Grocery"; 
        break; 
       case 2: 
        typos = "Coffee"; 
        break; 

       // ......... 


       case 19: 
        typos = "Bar"; 
        break; 
       case 20: 
        typos = "Club"; 
        break; 
      } 

      var markicon = "icons/0.png"; 
      if (shop_type >= 1 && shop_type <= 20) { 
       markicon = "icons/32/" + shop_type + ".png"; 
      } else { markicon = "icons/0.png"; } 

      var contentString = '<div><b style="font-size:14px">' + magazi + '</b><br/><i style="font-size:12px">' + typos + '</i><div style="float:right; margin-right:10px;"><img src="icons/b/' + shop_type + '.png" width="74" height="100" /></div><p style="font-size:12px"><b>Διεύθυνση:</b> ' + address + '<br /><b>Πόλη:</b> ' + city + '<br /><b>Περιοχή:</b> ' + area + '<br /><b>T.K.:</b> ' + tk + '</p></div>'; 
      infowindow = new google.maps.InfoWindow(); 

      var marker = new google.maps.Marker({ 
       position: latlng, 
       icon: markicon, 
       map: map 
      }); 
      google.maps.event.addListener(marker, "click", function() {   
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 
     }); 
    }); 
} 

    google.setOnLoadCallback(initialize); 
</script> 
</head> 
<body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

Et le fichier XML a cette structure:

<markers> 
    <marker name="Spot name 1" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.130796432495117"/> 
    <marker name="Spot name 2" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.192596532495117"/> 
</markers>

Alors quelqu'un peut me aider avec ça? Toute aide, idée ou guide sera très apprécié !!!

Source

2012-06-11 Michalis Vranis

Vous mélangez du code Google Maps API 2 et API 3, qui ne fonctionne pas, car ils ne sont pas compatibles entre eux.

par exemple. c'est API 3 code:

var marker = new google.maps.Marker({ 
      position: latlng, 
      icon: markicon, 
      map: map 
     });

mais est API 2 code:

var markicon = new GIcon(G_DEFAULT_ICON);

Vous devez certainement tout faire dans l'API 3, comme l'API 2 a été dépréciée depuis un certain temps. Cela dit, vous devez déplacer la logique entourant l'icône à utiliser à l'intérieur où vous obtenez les données XML, puis créer chaque marqueur. Quelque chose comme ceci:

jQuery.get("genXML.php", {}, function(data) { 
    jQuery(data).find("marker").each(function() { 
     var marker = jQuery(this); 
     var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng"))); 

     var shop_type = parseInt(marker.attr("type"), 10); 
     var markicon = "icons/0.png"; 

     if (shop_type >= 1 && shop_type <= 20) { 
      markicon = "icons/" & shop_type & ".png"; 
     } 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      icon: markicon, 
      map: map 
     }); 
    }); 
});

Source

2012-06-11 13:39:06 duncan

Merci pour la réponse. De ce que j'ai trouvé ici, http://stackoverflow.com/questions/10884085/google-maps-api-v3-gicon-is-not-defined, il n'y a pas besoin de code API 2 ... donc le markicon variable peut être évitée et utiliser le code sur le marqueur comme ceci: 'icon: url'. Mais mon souci est le 'si (shop_type == 1) url =" icons/1.png ";' –

Voir ma mise à jour – duncan

duncan qui était génial! Merci de me montrer la bonne façon. –

Marqueurs de Google Maps, infowindow, input XML, Fluster2

Répondre

Questions connexes