4sqmap JavaScript API v0.1 - Foursquare Public Lists on your site or blog.

In order to use this JavaScript API on your website, a link back to the http://www.4sqmap.com/ website should be provided!

First you should know the ID of Foursquare List which you would like to embed into your website or blog.
To do this, you should open this List on http://www.4sqmap.com/lists.
If you have URL to the List on foursquare.com - you can open this List on 4sqmap with the help of special form on page http://www.4sqmap.com/lists

1. Map only 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.4sqmap.com/js/0.1/api.min.js"></script>
    <script type="text/javascript">
        // Replace '2629883/tips' with the ID of your Foursquare List
        foursqmap.lists('map', '2629883/tips');
    </script>
    <div id="map" style="width:100%; height: 500px"></div>
2. Map + Sidebar 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.4sqmap.com/js/0.1/api.min.js"></script>
    <script type="text/javascript">
        // Replace '4e2df6f13151250387b53f5c' with the ID of your Foursquare List
        foursqmap.lists('map2', '4e2df6f13151250387b53f5c', {'sidebar': 'map2_sidebar'});
    </script>
    <div>
    <div id="map2_sidebar" style="width:300px; float:left; height: 500px; overflow: auto"></div>
    <div style="margin-left:300px;">
    	<div id="map2" style="width: 100%;height: 500px"></div>
    </div>
    </div>
Loading...