Google Maps Mashups WORKSHOP. Jeff Blossom, Senior GIS Specialist Center for Geographic Analysis. Harvard University gis.harvard.

Size: px

Start display at page:

Download "Google Maps Mashups WORKSHOP. Jeff Blossom, Senior GIS Specialist Center for Geographic Analysis. Harvard University gis.harvard."

Colleen Audra Garrett
6 years ago
Views:

1 Google Maps Mashups WORKSHOP Jeff Blossom, Senior GIS Specialist Center for Geographic Analysis Harvard University gis.harvard.edu Fall, 2012

2 Objectives: Workshop objectives and flow 1) In 2 hour, hands on, interactive session, learn how to create and customize a Google map mashup. 2) Learn a few fundamentals of programming, and gain insight into what skills and knowledge are required to be a successful Google map masher. 3) Learn the differences between Google MyMaps, mashups, and Google Earth and when to use each. Workshop flow: Introduction / Lecture (~20 min.) Lab exercise: Customizing a Basic Map (~90 min.) More exploration / Conclusion (~10 min.)

3 What is a Google Map? Maps.google.com - interactive street, satellite, terrain maps and more.

4 What is a Google Map? An enormous amount of searchable geographic information (gazetteer) A way of organizing the worlds information geographically

5 What is a Google Map? Maps.google.com > MyMaps create custom maps to share.

6 What is a Google Map? Google MyMaps customize maps with user created enhancements.

7 What is Google Maps - summary A web mapping service, free for noncommercial use that contains: Detailed global basemaps: streets, satellite imagery, and terrain. Useful services such as address and place locating by searching against an information rich gazetteer. Ability to overlay a wide variety of map layers, (weather, traffic) from static or dynamic sources. Map layer creation and light customization through functionality through MyMaps. An API that allows for embedding and extensive customization.

8 Application Programming Interface (API) API - An interface to a software program that allows users to interact and customize it. Determines the vocabulary and calling conventions a programmer uses to employ the software services. Usually based on an existing programming languages (C,.NET, VisualBasic, Java, javascript) Many desktop and web software applications have API s Google Maps API uses javascript

9 Google Maps API Allows embedding of a Google map into one s own web page using javascript. Free to use, on any website that is provided free of charge to others. Relatively gentle learning curve. Highly customizable and easily transferrable. Evolving - new functionality consistently being added.

10 What is a Mashup A web page or application that combines data or functionality from two or more external sources to create a new service. Therefore: MyWebPage + Google Map = mashup Even better: MyWebPage + Google Map + Other web service(s)

11 Google Map mashups examples: embeddable and customizable

12 Markup languages and javascript Markup languages Hyper Text Markup Language (HTML), Extensible Markup Language (XML), Keyhole Markup Language (KML), and many more Text encoding schemes used to create and format a web document. Use tags contained within brackets <> to define formatting that web browsers read. Markup language code sample: <html> <body> this a new paragraph of text that is bold <big>this text is new paragraph of text that is big</big> this text is italic </body> </html>

13 Markup languages and javascript Markup language code sample: <html> <body> this a new paragraph of text that is bold <big>this text is new paragraph of text that is big</big> this text is italic </body> </html> Rendered in a web browser:

Javascript Javascript: A programming language used primarily in web browsers. Uses variables, loops, and functions to generate output on the web.

14 Javascript Javascript: A programming language used primarily in web browsers. Uses variables, loops, and functions to generate output on the web. Allows for the development of enhanced user interfaces and dynamic websites. Javascript code sample (Adds a placemark on a Google map) function createmarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml(html); }); return marker; } var point = new GLatLng(35.6,-106.8); var marker = createmarker(point, info in Window ); gmap.addoverlay(marker);

15 Lab Exercise Open Firefox Go to Click on Google Maps tutorials Click on Exercise 1: Modifying a Basic Map

16 Google Maps API Coordinate System Notation Geographic Decimal Degrees Values of latitude (south to north range from -90 to 90) and longitude (west to east range from -180 to 180) A pair of latitude, longitude values represent a discreet spot on Earth

17 Google Maps, Mashups, and Google Earth Differences and similarities Google Maps A free web application (no software installation necessary) 2 dimensional map view, with street, satellite, terrain basemaps Data creation possible (points, lines, polygons), reads limited kml. A selected set of map overlays and functions available. Specific maps can be saved and shared easily on the web. Google Maps Mashups A free service allowing one to embed a Google Map into a web page. 2 dimensional map view, with street, satellite, terrain basemaps. Highly customizable to include everything in MyMaps and more. Customization requires using javascript and HTML. Requires access to a web-server to publish to the web. Google Earth A free desktop application (downloading and installation necessary). 3 dimensional map view with satellite basemap, many map overlay layers, and a rich set of visualization tools. Data creation possible (points, lines, polygons). Complex kml creation is possible.

18 Google Maps, Mashups, and Google Earth Which one to use? Google Maps Locating, measuring, or learning about the geography of a place. If you want to share a map. Communicate geographic information quickly. Google Maps Mashups Used to embed a map into a new or existing website. Create interactive web maps for your users. Google Earth Visualizing terrain, 3d buildings, historical imagery, and access to many thematic map layers. Virtual tour creation (movies) Small amounts of data collection, geocoding, and image georeferencing.

19 Axioms to follow for fledgling Google mappers If MyMaps or an existing mashup can be used to accomplish your web mapping goal, use it. In your internet browser, use View > Page Source to learn what code is used to produce a specific website. When coding, pay attention to every character. Comment your code thoroughly. Organize, document, and backup your maps and data. Other web map mashup API s exist (Yahoo!, Microsoft, OpenLayers). If Google s API doesn t serve your needs, explore the others.

20 Conclusion Google Maps contains an incredible amount of information with creative, intuitive ways to access and use it. Use Google Maps to communicate geographically!! Please fill out the workshop evaluation at: gis.harvard.edu > Learn GIS > Non Credit Training > scroll to the bottom Contact info: or CGA Website: Course exercise: Power point: Credits: This presentation includes material and information from maps.google.com and wikipedia.org

Data Acquisition using Mashup and 3-D Technology. Matt Rahr College of Agriculture and Life Sciences University of Arizona

Data Acquisition using Mashup and 3-D Technology Matt Rahr College of Agriculture and Life Sciences University of Arizona Let s Do It! What is a Mashup? + Your Data A hybrid website or web application