Extension to GMaps for creating a travel map
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.settings
tests
.gitattributes
.gitignore
bower.json
example.js
gulpfile.js
karma.conf.js
package.json
readme.md
travelmap.js
travelmap.js.map
travelmap.min.js

readme.md

travelMap

This project extends the GMaps project and allow a building of map that shows a travel map.

Overview

I built this when I decided to travel around the world in a year. To create a map, you need GMaps and the Google Maps API. You can see it in action on my tour map:

http://wilderworldtour.com

Installation

You can either download the travelmap.js (or min.js) or you can just use bower to install it:

> bower install travelmap

Dependencies

This project depends on GMaps and the Google Maps API. The bower package installs the GMaps project as a dependency already. It does not require any other libraries (e.g. no jQuery). It shouldn't have any problems working with any libraries as far as I know.

Simple Usage

Before you can use the library, you need to include the Google API and GMaps libraries. Usually, you would include all three at once:

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" ></script>
<script src="/bower_components/gmaps/gmaps.js" type="text/javascript" ></script>
<script src="/bower_components/travelmap/travelmap.js" type="text/javascript" ></script>
// Your Script Goes Here

Once you have the scripts, it's usage is simply calling createMap and specifying the stops and selector:

// JavaScript
var map = travelMap.createMap({
  stops: [
    { 
      lat: 33.748995, 
      long: -84.387982, 
      info: "Atlanta, Georgia - Departed Jun 3, 2014" 
    },
    { 
      lat: 48.856614, 
      long: 2.352222, 
      info: "Paris, France - Jun 4-24, 2014" 
    },
    { 
      lat: 50.850000, 
      long: 4.350000, 
      info: "Brussels, Belgium - Jun 25-27, 2014" 
    }
  ],
  selector: "#map"
});

Map Object

The map object that is returned from createMap contains three properties:

  • map: The underlying GMaps object
  • settings: The complete settings used to create the map. (readonly)
  • currentStop: An object that represents the current stop on the trip. (readonly)

options

When you call createMap, you can specify any of the following options (defaults are shown here):

{
  stops: [],        // Array of the stops to show (required)
  currentStop: 0,   // Ordinal Position of current location
  selector: "#map", // CSS Selector for container for the map
  icon: {           // Icon details
    url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAA1JREFUGFdjoDNgYAAAAHIAAejt7scAAAAASUVORK5CYII=",
    width: 3,
    height: 3,
  },
  initialZoom: 4,   // Initial Level of Zoom for the Google Map
  pastStroke: {     // Settings for the lines before the currentStop
    color: '#190300', 
    opacity: 0.5,
    weight: 2
  },
  futureStroke: {   // Settings for hte lines after the currentStop
    color: '#D30000',
    opacity: 0.6,
    weight: 2
  },
  mapOptions: {     // Options for map (See GMaps for full list of options)
    draggable: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    zoomControl: true
  }
}

Summary

If you're interested in making changes, please add an issue and send me a pull request!