An interactive map with custom overlay, marker description and data table.

(Notice: The pictures above don't share confidential business information.)

This is my first HTML and Javascript project and was build for Naturschutz-Tierpark Görlitz e.V.. It was first designed as digital archiving of all signs within the zoo. After I will have finished the project, i'm going to expand it as an "easy-to-create" interactive map for any usage.

1. Create a Google API Key and replace '' (sign-map.html) ...

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

For more information, see "Get API Key"...

2. Go to Firebase
3. Login with a Google account
4. "GO TO CONSOLE"
5. Create a new project
6. Create a Firebase Realtime Database
7. Change "Rules" to:

{ "rules": { ".read": true, ".write": true } }

For more information, see "Firebase Documentation"...

8. Replace all required <information> (sign-map.html)

var config = { apiKey: "<Google API Key>", authDomain: "<Firebase Project Domain>", databaseURL: "<Firebase Database URL>", projectId: "<Firebase Project ID>", storageBucket: "", messagingSenderId: "<Firebase Messaging ID>" };

9. Open the file (sign-map.html) and add your first marker

• custom overlay-picture
• adjustable zoom-level, center-position

• add one by clicking on the map
• clickable (opens the info-window of this marker)
• every marker has it's own settings and informations (icon, typ ...)

• DataTables API
  • sortable, clickable, searchable
• click on dataset opens the info-window of the appropriated marker
• contains the information of all markers

• Firebase Realtime Database

• filter for markers
• styling with CSS
• different maps in one file
• add more comments