Skip to content
Google Maps: My Bike Tours
Branch: master
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.
app
test
.babelrc
.bowerrc
.editorconfig
.gitattributes
.gitignore
.yo-rc.json
README.md
bower.json
gulpfile.js
package-lock.json
package.json

README.md

Google Maps: My Bike Tours

Have you ever wanted your fans to know where you were when you made that YT video? Or when you posted that Instagram post? With this app you can make a map and place your custom markers on it! By adding coordinates you can place them wherever you want! You can also make a route by linking them so there is a line through those markers. You can add your own content to the info-window (appears when you click on it) from each marker. This content must include:

  • Title
  • Description
  • Date This content might include:
  • Link to ride data
  • Other links
  • An image or a Youtube video In locations.json all the markers are being stored. See below how to modify this file. This particular application has all my routes, marker images and other data I wanted to show on my map.

Setup

To run the application:

  1. if you haven't already, install node.js and gulp (run npm install -g gulp-cli)
  2. open a terminal (Windows: PowerShell) in the folder (cd to the right folder)
  3. run npm install
  4. run gulp serve to start server
  5. navigate to localhost:9000 to see the application
  6. run gulp to make a dist folder with the code you can put on a website!

Modifying locations.json

scripts/locations.json is an array of markers. Each marker is made like this:

{
  "title": "",
  "location": {
    "lat": 12.345678,
    "lng": 12.345678
  },
}

Each of the above properties are required to make the marker.

  • title: Title of marker (heading of info-window)
  • location: Object of lat, lng coordinates. This is for the location of the marker on the map.

The markers are gonna be appearing in order, so make sure yours are in the order you want them to appear on the screen

Extra properties

  • description: Description of marker. Displayed in info-window.
  • date: Date is also displayed in the info-window (above description)
  • img: Name of image file in images/ (Don't put 'images/' in value,)(Do include the extention)
  • youtube: A string of characters positioned: https://www.youtube.com/watch?v=AT_THIS_PART&... of the Youtube Url (to create iframe a different URL is used, but only those characters which are unique to each video is used.)
  • rideData: A link to the page where you can see the riding data for that day (I use Strava). Displayed as a link with name: 'View ride data'.
  • links: Used like this:
"links": {
  "title": "",
  "links": [{
    "name": "",
    "link": ""
    }]
}
  • title: Title of (the group of) links
  • links: An array of objects containing:
    • name: The displayed text of anchor tag
    • link: The actual link (href)
  • icon: Name of image file in images/ (Don't put 'images/' in value,)(Do include the extention) that will be the icon of the marker. (Default dimensions of marker icon: 26X42)
  • line: This is used to tie the markers with the same value of this property together to create a line. The name you give this prop you'll also have to adjust in main.js (see more at Add a Line).

Other Customizations

Change Focus of Map

By default, the map is focused on a particular part of the world. To adjust the center of the map and zoom level: In scripts/main.js:

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 53.661212, lng: 10.898780 },
    zoom: 5
  });
  getMarkers();
}

Change lat and lngs of center which is the center point. Change zoom number to zoom in/out (the higher, the more zoomed-in (max 21))

Add Photos

Add all of the necessary photos in images/. These might include photos used inside of info-windows or marker icons.

Add a Line

To add a line when you have a new trip or route:

  1. In scripts/locations.json: Add the property of line to all of the markers that need to be on this line.
  2. In scripts/main.js: At const lines Add the name of your line below the comment, which corresponds to the value of the line property in all of your markers you want to connect with each other like this: LINENAME: [];
  3. At const lineIntervals also add the name of your line, with the desired interval time (in ms) you want for that list of markers to spawn. It is necessary to add your line in here too, otherwise your line won't be spawn.
  4. (optional): You can style the weight, color and other things of your line in main.js at const lineStyles. Make sure to add name: 'NAME_OF_LINE' prop to the line It might seem redundant, but it's necessary if you want to be able to close the line afterwards via a button.

If you've done everything right, the two points should now be connected!

Add a KML file

You can add a KML file, so you can show the actual line you rode, by adding this at const kmlLines = in main.js:

LINE_NAME: {
  url: ''
}

By default, the KML file will not be set to our map. To do this, you can invoke openKmlLines() using a button with event listener or something.

I'm Here!

There is one more line type: 'ImHere'. This one is special because this is a marker with no lines to it and it will get spawn when all of the other markers are spawn. This means that this one will draw some extra focus and it is meant to be used as an "I'm Here" kind of marker. Give your "I'm Here"-marker's line property the value "ImHere" and this will be your "I'm Here"-marker.

Customize Colors

In styles/main.scss you can see at the top are 5 variables. These five describe the color used in these area's (all in the info-window). You can use custom hex-decimals to replace the hex-decimals there to have custom colors for these places.

The Animations

'Drop' Animation

If you do not want to have the 'drop' animation, add this line to your marker in locations.json:

"animation": false,

Why Order Matters

When you come to the point you have quite a few lines and markers you can probably see that your markers in a particular route are being spawn one by one and the line will be drawn when all markers are placed for each route. This is why each marker needs the information about in which line it is and why they need to be in order. It makes it a little harder to add markers, but it makes for better customizability.

Code Structure

| Map is initialized in initMap().
| getMarkers fetches locations.json, pushes data to locations array.
| makeMarkers(locations) makes marker of each location.
|\ click ->
| | populateInfoWindow(marker, infowindow) opens infowindow on marker.
| | generateHtmlInfowindow(marker) generates HTML for info-window of marker.
| openMarkers() evaluates the interval for each array of markers (line)

Features that might be added in the future:

  • A screen where you can make each marker (instead of directly in locations.json)
You can’t perform that action at this time.