Problème de connexion de l'API au Clusterer de marqueurs et à l'API Google Maps

-1

J'ai lu l'exemple simple fourni avec markerclusterer.js et quelques other questions ici sur Stack Overflow mais je ne suis pas sûr de ce que je fais de mal.Problème de connexion de l'API au Clusterer de marqueurs et à l'API Google Maps

Les autres exemples que je vois utilisent json ou les marqueurs construits directement dans la page HTML mais j'appelle mes données d'une autre API. Quand je vais essayer de modifier ma page pour incorporer les marqueurs et l'autre API, je finis généralement par casser ma page.

En ce moment, je n'ai aucune erreur dans la console, mais de toute évidence quelque chose ne fonctionne pas correctement.

Qu'est-ce que je fais mal? Merci de votre aide!

HTML:

<body> 
<div class="container"> 
    <div id="content"> 
     <br> 
      <div id="googleMap"></div> 
     <br> 
     <footer id="footer"> 
      <p>Footer</p> 
     </footer> 
    </div> 
</div>

CSS:

#content { 
box-shadow: 5px 5px 10px 5px black;} 

#googleMap { 
height: 400px; 
width: 100%; 
border: 1px solid black;}

JavaScript:

var map; 
var MarkerClusterer; 
var marker; 
var mcOptions; 
var markers; 

$(document).ready(function(){ 

//Construct the query string 
url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' 
     + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX'; 

function initialize() { 
    var mapProp = { 
     center:new google.maps.LatLng(39.003888,-77.105367), 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.TERRAIN 
    }; 




    map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
//google.maps.event.addDomListener(window, 'load', initialize); 

initialize(); 

//Retrieve our data and plot it 
$.getJSON(url, function(data, textstatus) { 
     $.each(data, function(i, entry) { 

     //Cluster Markers 
      var markers = []; 
      for (var i = 0; i < 100; i++) { 
      var entryMarkers = entry[i]; 
      var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
               parseFloat(entry.coordinates.longitude)); 
      } 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
               parseFloat(entry.coordinates.longitude)), 
       map: map, 
       title: entry.file_name 
      }); 
      markers.push(marker); 
     }); 
     var markerCluster = new MarkerClusterer(map, markers); 
    }); 

});

Source

2015-10-14 adin

Vous devez mettre tous vos marqueurs dans un seul tableau. En ce moment, vous effacez le tableau des marqueurs avant de créer chaque marqueur. Déplacez le var markers = []; en dehors du $ .each.

//Retrieve our data and plot it 
$.getJSON(url, function (data, textstatus) { 
    //Cluster Markers 
    var markers = []; 
    $.each(data, function (i, entry) { 


     for (var i = 0; i < 100; i++) { 
      var entryMarkers = entry[i]; 
      var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
      parseFloat(entry.coordinates.longitude)); 
     } 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
      parseFloat(entry.coordinates.longitude)), 
      // map: map, 
      title: entry.file_name 
     }); 
     markers.push(marker); 
    }); 
    var markerCluster = new MarkerClusterer(map, markers); 
});

proof of concept fiddle

extrait de code:

var map; 
 
var MarkerClusterer; 
 
var marker; 
 
var mcOptions; 
 
var markers; 
 

 
$(document).ready(function() { 
 

 
    //Construct the query string 
 
    url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX'; 
 

 
    function initialize() { 
 
     var mapProp = { 
 
     center: new google.maps.LatLng(39.23888, -77.105367), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }; 
 

 

 

 

 
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    } 
 
    //google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    initialize(); 
 

 
    //Retrieve our data and plot it 
 
    $.getJSON(url, function(data, textstatus) { 
 
    //Cluster Markers 
 
    var markers = []; 
 
    $.each(data, function(i, entry) { 
 

 

 
     for (var i = 0; i < 100; i++) { 
 
     var entryMarkers = entry[i]; 
 
     var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
 
      parseFloat(entry.coordinates.longitude)); 
 
     } 
 

 
     var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
 
      parseFloat(entry.coordinates.longitude)), 
 
     // map: map, 
 
     title: entry.file_name 
 
     }); 
 
     markers.push(marker); 
 
    }); 
 
    var markerCluster = new MarkerClusterer(map, markers); 
 
    }); 
 

 
});

#content { 
 
    box-shadow: 5px 5px 10px 5px black; 
 
} 
 
#googleMap { 
 
    height: 400px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
 
<div class="container"> 
 
    <div id="content"> 
 
    <br> 
 
    <div id="googleMap"></div> 
 
    <br> 
 
    <footer id="footer"> 
 
     <p>Footer</p> 
 
    </footer> 
 
    </div> 
 
</div>

Source

2015-10-14 01:54:40 geocodezip

I enlevé 'marqueurs var = [];' de .getJSON $ et ajoutée '= []' à Var Varers avant que le document est chargé et cela fonctionne. Merci! – adin

Ça vous dérange de me dire ce que je fais mal quand j'ajoute des fenêtres d'information? J'ai fait des fenêtres pop-up sur une brochure, mais pas avec Google ou le plugin de marqueur de cluster. [Fiddle here] (http://jsfiddle.net/f1mvanop/2/) – adin

Voilà une autre question. – geocodezip

Problème de connexion de l'API au Clusterer de marqueurs et à l'API Google Maps

Répondre

Questions connexes