https://github.com/kmarryo/neighbourhoodmap

Map of Augsburg with Google Maps API, Wikipedia API and Knockout JS
https://github.com/kmarryo/neighbourhoodmap

google-maps js-files knockoutjs map udacity-frontend-nanodegree wikipedia-api

Last synced: 1 day ago
JSON representation

Map of Augsburg with Google Maps API, Wikipedia API and Knockout JS

• Host: GitHub
• URL: https://github.com/kmarryo/neighbourhoodmap
• Owner: kmarryo
• Created: 2017-02-25T20:38:52.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-17T16:58:59.000Z (almost 8 years ago)
• Last Synced: 2024-11-20T14:50:59.521Z (2 months ago)
• Topics: google-maps, js-files, knockoutjs, map, udacity-frontend-nanodegree, wikipedia-api
• Language: JavaScript
• Homepage: https://kmarryo.github.io/neighbourhoodMap
• Size: 94.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Augsburg: Interesting Places

===============================

## Description

Made for the Udacity Frontend-Nanodegree, in this project you will see a map of Augsburg (Bavaria, Germany). This map is included via the Google Maps API. Important or interesting places are marked. Functionality includes clickable markers with content from wikipedia matching to the locations and a search function for filtering the places (and markers).

## Install

- Download the project on Github: [Augsburg Map Project](https://github.com/kmarryo/neighbourhoodMap)

OR

- See the result on [Github Pages](https://kmarryo.github.io/neighbourhoodMap)

## Getting started

- Open the index.html in your **local webserver**

OR

- Click on my  [Github Pages Website](https://kmarryo.github.io/neighbourhoodMap)

## Used techniques

- Knockout JS

- Google Maps API

- Wikipedia API

- jQuery

- Sass (compiled via Prepros)

## Search box

As you can see, depending on your device, there is a search bar on the right hand side or - on small (mobile) screens - on the bottom of the page. With this search, it is possible to filter the shown markers as well as the results in the search box.

## Click on the markers

On click, the markers will animate (bounce) and an info window opens. In the info window is shown what is located there (for example town hall Augsburg) and also three related articles which you can find on wikipedia. The content is automatically filled via the wikipedia API. So it is possible for you to automatically get the best fitting results depending on the location you are looking for and straight get to the matching wikipedia article just by clicking on them.

## Additional infos

The application is designed to work responsive. Therefore you can use it on mobile devices as well as on big screens.

# License

MIT