FourSquare JSON to MAP

FourSquare JSON to MAP

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id='map'></div>
<ul id="results"></ul>
<div id='foursquare-results'></div>
<hr>
<div id='venues'></div>

CSS

#map {
    height:300px;
    background:#6699cc;
}
#venues {
    font-size:8px
}

JavaScript

var map;
       var items, markers_data = [];
       $.getJSON('https://api.foursquare.com/v2/venues/search?ll=32.7153,-117.1564&limit=14&radius=1000&client_id=PKAHBB1OAX0B000CG5UUYO4BXV0LWQWKFB51EK3XVNFJ2ULS&client_secret=RDPX01C01RHCYASZIKVH5XXMPVFIPLFHFP1D53UR4GUWQD50&v=20120101',


       function (data) {



           $.each(data.response.venues, function (i, venues) {
               content = '<p>Name: ' + venues.name +
                   ' Address: ' + venues.location.address +
                   ' Lat/long: ' + venues.location.lat + ', ' + venues.location.lng + '</p>';
               $(content).appendTo("#venues");
               //map
               markers_data.push({
                   lat: venues.location.lat,
                   lng: venues.location.lng,
                   title: venues.name,
                   icon: {
                       size: new google.maps.Size(32, 32),
                       url: 'https://foursquare.com/img/categories/food/default.png'
                   },
                   infoWindow: {
                       content: '<p>' + content + '</p>'
                   }


               });



               //map

           });
           // plot


           map.addMarkers(markers_data);
       });







       function printResults(data) {
           $('#foursquare-results').text(JSON.stringify(data));

       }

       $(document).on('click', '.pan-to-marker', function (e) {
           e.preventDefault();

           var position, lat, lng, $index;

           $index = $(this).data('marker-index');

           position = map.markers[$index].getPosition();

           lat = position.lat();
           lng = position.lng();

           map.setCenter(lat, lng);
       });



       //------


       //------

       $(document).ready(function () {

           map = new GMaps({
               div: '#map',
               lat: 32.71533,
               lng: -117.15726,
               zoom: 15,
               scrollwheel: false,
   ...