$('.default_map').tweetMap({
q: '#newyork',
latitude: '40.714353',
longitude: '-74.005973',
zoom: 14
});
$('.custom_map').tweetMap({
q: '#sanfran',
latitude: '37.77493',
longitude: '-122.419416',
zoom: 16,
geocode: '37.77493, -122.419416, 3mi',
maptype: 'TERRAIN'
});
Reload Twitter feedWith Tweet to Map, it's very easy. Simply follow these steps and you're ready to go!
There are two requirements you need to meet before you can use Tweet to Map on your website. First you need to read through the following documentation and understand how to get it working. Second is you must be able to include jQuery 1.8.1 in your web page. This is what we have been testing with - It may work with older versions.
Download the latest version of Tweet to Map.
Browse to the /tweetmap directory and include the tweetMap css file in the <head> section on your website.
<link rel="stylesheet" href="tweetmap/tweetMap-1.1.0.min.css">
Next, add the Google Maps API along with jQuery, timeago and tweetMap just before the </body> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=[insert-key-here]"></script> <script src="tweetmap/tweetMap-1.1.0.min.js"></script>
Once that is done, you need to browse to /tweetmap/config.php and enter you Twitter app settings. If you're not sure about how to get these, visit here to get the required keys.
Optional: to change the cache frequency, browse to /tweetmap/config.php and edit 'CACHE_DURATION'. By default it is set as 1 hour.
The HTML structure is quite simple too. Just place a <div> somewhere on your page, style it with CSS (don't forget to assign a fixed width and height) and give it a unique ID or class.
The gmap class is required.
<div id="myMap" class="gmap"></div>
Select the new div element using jQuery's selectors and call the tweetMap() function on it with the required Twitter username/screenname. It is recommended to call the function once the DOM is ready.
$(document).ready(function(){
$('#myMap').tweetMap({
q: '#newyork',
latitude: '40.714353',
longitude: '-74.005973'
});
});
Tweet to Map can be customized in many different ways. All you need to do is to pass an object to the tweetMap() function. Please see below for a complete list of properties that can be passed.
| Option | Properties | Description |
q | string - Default: '' | This is the search query to find your Tweets. Using #something OR @something etc.. To test it out, Visit Twitters search page. |
geocode | string - Default: '' | Returns tweets located within a given radius of the given latitude/longitude. The location is preferentially taking from the Geotagging API, but will fall back to their Twitter profile. The parameter value is specified by "latitude,longitude,radius", where radius units must be specified as either "mi" (miles) or "km" (kilometers). e.g. 37.781157,-122.398720,1mi |
latitude | string - Default: '' | This is the start location when your map loads. You could either use GeoNames or this bookmarklet to get the coordinates right from Google Maps. |
longitude | string - Default: '' | This is the start location when your map loads. You could either use GeoNames or this bookmarklet to get the coordinates right from Google Maps. |
zoom | integer - Default: 11 | The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution. |
marker | string - Default: 'tweetmap/marker.f18e0a.png' | Relative Location to the marker image file. |
maptype | string - Default: 'ROADMAP' | ROADMAP displays the default road map view SATELLITE displays Google Earth satellite images HYBRID displays a mixture of normal and satellite views TERRAIN displays a physical map based on terrain information. |
since_id | string - Default: '' | The screen name / username of the user for whom to return results for. |
rpp | string - Default: '100' | Specifies the number of tweets to try and retrieve, up to a maximum of '100'. |
max_id | string - Default: '' | Returns results with an ID less than (that is, older than) or equal to the specified ID. |
until | string - Default: '' | Returns tweets generated before the given date. Date should be formatted as YYYY-MM-DD. |
include_entities | string - Default: 'true' | When set to 'true', each tweet will include a node called "entities,". This node offers a variety of metadata about the tweet, which includes the ability to display images. |
result_type | string - Default: 'recent' | Specifies what type of search results you would prefer to receive. The current default is "recent." Valid values include:
|
customMarkers | object | You can also add in static custom markers into your Google Map by using the following:
customMarkers: {
marker: {
latitude: '-36.84731121505897',
longitude: '174.76342678070068',
html: '<p>Hello world.</p>'
}
}
|
since_id | string - Default: '' | The screen name / username of the user for whom to return results for. |
rpp | string - Default: '100' | Specifies the number of tweets to try and retrieve, up to a maximum of '100'. |
max_id | string - Default: '' | Returns results with an ID less than (that is, older than) or equal to the specified ID. |
until | string - Default: '' | Returns tweets generated before the given date. Date should be formatted as YYYY-MM-DD. |
include_entities | string - Default: 'true' | When set to 'true', each tweet will include a node called "entities,". This node offers a variety of metadata about the tweet, which includes the ability to display images. |
result_type | string - Default: 'recent' | Specifies what type of search results you would prefer to receive. The current default is "recent." Valid values include:
|
customMarkers | object | You can also add in static custom markers into your Google Map by using the following:
customMarkers: {
marker: {
latitude: '-36.84731121505897',
longitude: '174.76342678070068',
html: '<p>Hello world.</p>'
}
}
|