by Gene Ting-Chun Kao
https://genekao.github.io/neighbourhood-map/
This is a single page application featuring a map of listing my favourite restaurants in Stuttgart using Google Maps API together with Foursquare API. The application is responsive and has a hamburger icon on the top left corner, which expends a menu bar for extra functionality to search and author's info. You will see street panorama view by clicking the list on the menu bar. While clicking the marker on the map, you will see general information provided by Foursquare and an extra comment from me.
- JavaScript
- HTML
- CSS
- Bootstrap 4
- jQuery
- KnockoutJS
- Google Maps API
- Foursquare API
For HTML, CSS and JavaScript code style, Udacity Frontend Nanodegree Style Guide is used.
.
├── README.md
├── css
│ └── style.css
├── index.html
└── js
├── app.js
├── locations.js
├── map-styles.js
└── utils.js
$ git clone https://github.com/GeneKao/neighbourhood-map.git
$ cd neighbourhood-map
$ python3 -m http.server #(Or simply opne index.html in a web browser.)After cloning the repo, you will have to insert your own Google Map API key manually at the end of index.html.
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=YOUR_KEY_HERE&v=3&callback=initMap">
</script>Replace YOUR_KEY_HERE with your own API key.
Some starter code was from the Udacity's course Udacity Google Maps APIs by Google and repo.
For the basic layout, my HTML and CSS refer some part of the code from this example.
Map style using Neil's Chef lobster theme from SNAZZY MAPS. You can also change style simply download any template and replace my setting in map-styles.js.