Working with Google Maps -...

of 15 /15
Working with Google Maps Javascript, XML, and AJAX By: James McAndrew http://

Embed Size (px)

Transcript of Working with Google Maps -...

  • "

    Working with Google Maps Javascript, XML, and AJAX

    By: James McAndrew

  • What is Google Maps?

      Google Maps is a free web mapping service.

      It offers street level maps for pedestrians, cars, and public transportation.

      It also shows terrain and photographic information.

      It has a very extendable API (Application Programming Interface) that can be used to develop custom Google Maps based applications.

  • How can developers use Google Maps API?

      Google Maps “Mashups” have been popular for quite some time. Some examples of these are: - A Craigslist Apartment

    finder / Google Maps mashup - A map of recent posts on the website Twitter.

      Many more examples can be found here: and all over the web

  • This Slide Show

      This Slide show was created to demonstrate the basic concepts behind adding markers to a Google Maps document.

      This Slide show will not cover Javascript programming or customization of Google Maps applications.

      It is intended to give users a better understanding of how these mashups are created.

      Developers may want to use the example code to extend their own maps. There are links at the end of the presentation to the full developers site.

  • HTML

      HyperText Markup Language.

      The language of the World Wide Web




  • Javascript

      Javascript is a client side scripting language.

      It is generally run within the user’s Web Browser.

      Very similar to both C and Java, but is a distinct language with its own syntax.

      Many dynamic websites are driven by Javascript. (e.g. Google Maps)

  • XML

      eXtensible Markup Language

      Similar to HTML

      Used to store information.


    Basic bread Flour


    Mix ingredients together. Bake in the oven at 180°C for 30 minutes.

  • AJAX

      Asynchronous JavaScript and XML

      Used to dynamically load XML information into a HTML window using JavaScript.

      Ajax is not a programming language, the term is used to describe the use of XMLHttpRequest or similar objects.

  • XMLHttpRequest

      XMLHttpRequest is the main object we use in JavaScript to load an XML document.

      Google Maps provides an interface to load XML that uses XMLHttpRequest, but does not require the programmer to directly manipulate the XMLHttpRequest object.

  • Google Maps API

      Google created the Google Maps API to facilitate developers integrating Google Maps into their web sites with their own data points. It is a free service, which currently does not contain ads, but Google states in their terms of use that they reserve the right to display ads in the future.

      By using the Google Maps API it is possible to embed the full Google Maps on an external web site. Developers are required to request an API Key, which is bound to the web site and directory entered when creating the key. Creating your own map interface involves adding the Google JavaScript code to your page, and then using Javascript functions to add points to the map.

      (From Wikipedia)

  • Requesting a Google Maps API Key

      Requires a web server to run your object.

  • Creating your XML Document

  • Google M

    aps HT



    age 1

  • Google M

    aps HT



    age 2

  • More information:

      Google’s API How-To

      Google Maps API Blog

      My Example: