The Tweet to Map jQuery plugin gives you the power to create Google Maps, showing location based Tweets.

Simple map with markersDefault Tweet to Map options

$('.default_map').tweetMap({
    q: '#newyork',
    latitude: '40.714353',
    longitude: '-74.005973',
    zoom: 14
});

Map with custom settingsCustom start location, zoom level & tile type

$('.custom_map').tweetMap({
    q: '#sanfran',
    latitude: '37.77493',
    longitude: '-122.419416',
    zoom: 16,
    geocode: '37.77493, -122.419416, 3mi',
    maptype: 'TERRAIN'
});
Reload Twitter feed

What are the features?

  • Displays Twitter posts (Tweets) by location Using Twitter's HTTP API
  • Option to load multiple maps on the same page
  • iPhone and iPad touch compatible And optimized for Retina display
  • Pretty markers and map bubbles Configurable markers and over-writable map bubble css
  • Lightweight! The compressed map script is only 4KB!


  • Choose to show Tweets with or without images
  • Uses Twitter style time for Tweets Using the timeago jQuery plugin. Only 3KB!
  • Over 10 (and counting) easily configurable settings!
  • Continuous development. The project is constantly revised and improved with added features
  • Supports all major browsers Internet Explorer 7+, Firefox 4+, Safari 5+ & Chrome 14+

How to use?

Getting started..

With Tweet to Map, it's very easy. Simply follow these steps and you're ready to go!

  1. Requirements
  2. Installation
  3. HTML structure
  4. Creating a map
  5. Customizing

Requirements

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.

Installation

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?sensor=false"></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.

HTML structure

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>

Creating a map

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'
    });
});

Customizable options

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.

OptionPropertiesDescription
qstring - Default: ''This is the search query to find your Tweets. Using #something OR @something etc.. To test it out, Visit Twitters search page.
geocodestring - 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
latitudestring - 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.
longitudestring - 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.
zoominteger - Default: 11The 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.
markerstring - Default: 'tweetmap/marker.png'Relative Location to the marker image file.
maptypestring - 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_idstring - Default: ''The screen name / username of the user for whom to return results for.
rppstring - Default: '100'Specifies the number of tweets to try and retrieve, up to a maximum of '100'.
max_idstring - Default: ''Returns results with an ID less than (that is, older than) or equal to the specified ID.
untilstring - Default: ''Returns tweets generated before the given date. Date should be formatted as YYYY-MM-DD.
include_entitiesstring - 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_typestring - Default: 'recent'Specifies what type of search results you would prefer to receive. The current default is "recent." Valid values include:
  • mixed: Include both popular and real time results in the response.
  • recent: return only the most recent results in the response
  • popular: return only the most popular results in the response.
customMarkersobjectYou 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_idstring - Default: ''The screen name / username of the user for whom to return results for.
rppstring - Default: '100'Specifies the number of tweets to try and retrieve, up to a maximum of '100'.
max_idstring - Default: ''Returns results with an ID less than (that is, older than) or equal to the specified ID.
untilstring - Default: ''Returns tweets generated before the given date. Date should be formatted as YYYY-MM-DD.
include_entitiesstring - 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_typestring - Default: 'recent'Specifies what type of search results you would prefer to receive. The current default is "recent." Valid values include:
  • mixed: Include both popular and real time results in the response.
  • recent: return only the most recent results in the response
  • popular: return only the most popular results in the response.
customMarkersobjectYou 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>'
    }
}