1 / 7

Quick Start with Google Maps API: Displaying Data on Custom Maps

Learn to integrate Google Maps into your website in just 5 minutes! This guide walks you through obtaining a Google Maps API Key, displaying a simple "Hello World" map, and adding custom markers using latitude and longitude coordinates. You can enhance your map further by incorporating controls for zooming and panning. For bulk point plotting, discover how to use specially formatted XML files to display multiple data points seamlessly. Perfect for developers looking for a straightforward way to visualize data on maps.

addison
Télécharger la présentation

Quick Start with Google Maps API: Displaying Data on Custom Maps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mash-it-up Google Style Put your data on the Map

  2. Google Maps • One of the easiest APIs to use. In 5 minutes you can have a simple map on your site. • First step – Get a Google Maps API Key: http://www.google.com/apis/maps/

  3. The 5 Minute GMap • Get the “Hello World” example: http://www.google.com/apis/maps/documentation/#The_Hello_World_of_Google_Maps • Copy that text into a new HTML file. Add your key (Replace ‘key=abcdefg’, with ‘key=the big long key from Google’) • Lets add some controls (zoom/pan): map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());

  4. Add markers to the map • We need a Lat/Long coordinate in the format: XX.XXXXXX, -YY.YYYYYY(ex. 36.601145,-121.894684 – Portola Plaza) • Create a new point:var point = new GLatLng(36.601145,-121.894684); • Add it to the map!map.addOverlay(new GMarker(point)); • Save your work and view it in your browser of choice!

  5. All your data are belong on Google Maps • For plotting many points, Google has included a way to import specially formatted XML files. With a simple loop all your points will be plotted to the map!http://www.google.com/apis/maps/documentation/#Using_XML_and_Asynchronous_RPC • Sample format: <markers> <marker lat="37.427770" lng="-122.144841"/> <marker lat="37.413320" lng="-122.125604"/> <marker lat="37.433480" lng="-122.139062"/> <marker lat="37.445427" lng="-122.162307"/> </markers>

  6. Plotting Dynamic Data • LCLS delivery routes are stored in a MySQL database. • Using ASP.NET and a custom API, the routes are outputted into an XML formatted document which is loaded into the Google Map API:http://www.lcls.org/api/query/?method=lcls.members.getDeliveryRoute&routeid=1&day=friday

  7. Questions? Seldom updated blog: http://cdeweese.blogspot.comEmail: chris.deweese@gmail.com

More Related