How'd You Build That Map?

OctocatWhen I started the Wilder World Tour, I built a simple map so my Mom could know where I was during the trip. I thought others might be interested too.

I’d been meaning to find an extra day or two to wrap this all in a little wrapper and share it. I finally found time the last couple of days. The result is travelMap, a library that allows you to build your own travel maps including showing current location, lines between locations, and popup information about each stop.

Find the project on GitHub and use it, share it, fork it:


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

> bower install travelmap


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="" 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"

Let me know what you think!

Shawn Wildermuth
Author, Teacher, and Coach

My Courses

Wilder Minds Training
Vue.js by Example
Bootstrap 4 by Example
Intro to Font Awesome 5 (Free Course)
Designing RESTful Web APIs (new)
Building an API with ASP.NET Web API
Building an API with ASP.NET Core
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular
Less: Getting Started

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 3.0.0
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86