如何将图钉添加到谷歌地图地理编码 api

Question

I am trying to combine these three things into one.

• http://jsfiddle.net/Dansker/hk5fgbzr/3/ (fiddle 1)
• http://jsfiddle.net/Dansker/rnrba8so/10/ (fiddle 2)
• data.illinois.gov/resource/wsms-teqm.json (data source)

I want to add pins like I did in fiddle 1 two the code I have in fiddle 2. However I need to use the data different data source. The way I made it work in fiddle 1 was with the latitude and longitude. But because I can not do that with the new data source I need to find a new way. That is why I am trying to add it to fiddle one. Will that work? If so how can I do it? If it wont work what would you suggest using the google maps api?

$.getJSON(URL, function(data, textstatus) {

          $.each(data, function(i, entry) {

              var contentString = '<div id="content">'+
                  '<div id="siteNotice">'+
                  '</div>'+
                  '<h1 id="firstHeading" class="firstHeading">' + entry.name_ + " Library" + '</h1>'+ '<hr>' + 
                  '<div id="bodyContent">'+ 
                  '<p>' + entry.address + " " + entry.zip + '.<br>' + 
                  '<p>' + '<a href="'+entry.website.url+'">' + entry.website.url + '</a>' + '</p>'+
                  '<p>' + entry.hours_of_operation + '</p>'+
                  '</div>'+
                  '</div>';


              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });


              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(entry.location.latitude, 
                                                   entry.location.longitude),
                  map: map,
                  title: entry["dba_name"] + "\n" + entry["address"]
              });

              google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
              });

          });
    });

Answer 1

Since you have 2 callback functions, the correct way to do this is to first finish work for first callback, in this case, downloading the JSON and parse them, also I would store all the entry into entries just so that we can use the data when we add the markers, which is called at the end of the first callback.

about the API access limit, sadly I think you have to use the paid google maps geocoding API, or other services like openStreetmaps.

I also have a jsfiddle setup, hope this help.