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

Simple map with markers

	q: '#newyork',
	latitude: '40.714353',
	longitude: '-74.005973',
	zoom: 12

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

	q: '#sanfran',
	latitude: '37.77493',
	longitude: '-122.419416',
	zoom: 14,
	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


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 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=""></script>
<script src=""></script>
<script src="tweetmap/timeago.min.js"></script>
<script src="tweetmap/tweetMap-1.1.0.min.js"></script>

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.

		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.

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.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:
  • 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.
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>'