Google Maps JavaScript API Examples

Introduction

• Latitude & Longitude
• Google Maps
• Google Maps JavaScript API
• Google Maps Places
• Google Maps Direction
• GitHub gmaps project

Goal

• Learn how to embed Google Maps into your web apps

Steps

• layout Add Twitter Bootstrap framework
• layout Add simple map layout with a side panel
• maps Embed a Google Map into your page
  • Reference
  • new google.maps.Map()
  • LatLng, Marker, InfoWindow
  • setCenter / panTo
• markers Add POI (point of interest) markers
• infowindow Add infoWindows
• custom-markers Custom marker
• places Implement feature to dynamically add POIs / markers
  • Reference
  • Implement form
  • Implement calls to Places service
• direction Implement feature to lay out directions/route

References / Sources

• Final App Preview
• Source
• http://goo.gl/EfAkd
• https://developers.google.com/maps/documentation/javascript/tutorial
• https://developers.google.com/maps/documentation/javascript/examples/place-search
• http://twitter.github.io/bootstrap/
• jQuery
• http://git-scm.com/
• http://github.com/
• http://subtlepatterns.com/

Further Studies

• Other Google Maps APIs
• Google Developers Live

About Me

• Bryan Chug
  • Founder, Aestrea Software Development
  • @bryanchug
  • https://github.com/bryanchug
  • facebook.com/bryanchug
  • bryan.chug@gmail.com
  • bryan.chug@aestrea.com

Thank you very much!

• Please feel free to clone, fork, or copy. ^_^