shawnwildermuth / travelmap

Extension to GMaps for creating a travel map

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!

travelmap's Issues

APIKey

Hi Shawn, this is a simple one. Now that Google insists on an API Key, perhaps add this to the doco?

e.g

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx"></script>

P.S. thanks for putting all this great stuff together.

Typescript Definition file

Hello Shawn,

I was wondering if you will be providing d.ts for some of your js files in your pluralsight courses as in this travel map js. file.

Thank you,
Greg

Hiding Current Location

Hi Shawn,
Just wondering if there is a way to hide the current location altogether? For example when I'm finished my trip. I'm just looking to have points on the maps with no particular current location set. Thanks.

Oops! Something went wrong.

Hi!

I've been following along with your Plural sight training video, and integrated this travelMap component. When it is set up, I briefly see Google maps load up with all the expected stops, but then the following error pops up:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

The console lists the following error:
TypeError: d is undefined (common.js:48:82).

My suspicion is that the API surface has changed and something broke in the meantime. Can you shed any light as to what happened?

Thanks!