Embed Size (px)
DESCRIPTION
Google is the leader in Internet search engines. It has also surpassed many of its competitors in mapping and directions services. Unlike some other web mapping sites, Google has exposed its underlying data through an extensive API. This API lets us create dynamic map displays and applications suitable for desktop and mobile devices alike. During this session I will describe our experiences in creating a campus Google map. In the spirit of this year's UNC CAUSE, we will describe how we used the expertise of many campus departments and individuals to improve the map for all users. We will also describe how we were able to make use of Google's hosted maps to allow for collaborative mapping without requiring any programming experience. Other areas of discussion include: soliciting feedback and corrections for your maps, encouraging participation to avoid stale data, and creating a balanced team to implement your own maps sites. In addition to the always important user experience issues, we will describe the technologies available from Google and others to rapidly deploy maps to your university Web site.
Citation preview
What’s That Building?
Using the Google Maps API to Create a Campus Map
About Me
oTechnology Consultant, East Carolina [email protected] ohttp://blog.ecu.edu/millerfohttp://blog.ecu.edu/techtips ohttp://www.carolinamantis.como@Lightningwhelk
Going From
This To This
What did we do?
oResearchoPlanningoImplementationoUpkeep
Research
oWhy create a new campus map?oWho offers maps?oHow can we create map instances?oWhat information goes on map?oWhere is information that goes on map?
Why create a new map?
To get from here To here
Why create a new map?
oIncreasing power of desktop web browsersoIncreasing power of mobile devicesoImproved real world navigationoImproved marketing of UniversityoImproved experience for visitorsoGartner says so
Who offers online maps?
oOpenStreetMap MapsoMapQuest MapsoYahoo MapsoBing MapsoGoogle Maps
Who offers online maps?OpenStreetMap Maps
Who offers online maps?MapQuest Maps
Who offers online maps?Yahoo Maps
Who offers online maps?Bing Maps
Who offers online mapsGoogle Maps
How can we create map instances?
oOpenStreetMap MapsoMapQuest MapsoYahoo MapsoBing MapsoGoogle Maps
How can we create map instances?
oURLs with query strings (“static maps”)oURLs to third party sitesoHTML / CSS / JavaScriptoAdobe FlashoMicrosoft SilverlightoOS Specific SDK
Platform Decision – Jan 2009
oGoogle Maps API Most advanced and stable Base tile layer most developed Most original documentation Most third party examples and tutorials Most third party API extensions
Platform Decision – Jan 2009
oJavaScript API Team’s experience with HTML / CSS /
JavaScript No third party browser plug-in Operating system agnostic Simple development environment Control of branding and user experience
What Information Goes On Map?
oBuildingsoParkingoTransitoFood / DiningoHousingoVisitor informationoEmergency resourcesoMore (and more and more…)
Who has the information that goes on map?
oCampus Facilities / OperationsoUniversity MarketingoUniversity PublicationsoAdmissionsoHousing / Parking / Transit OfficesoCampus Police / SafetyoIT Department(s)oCity / County / State Government
Getting Data
oReach out to map stake holdersoFind person responsible for existing dataoFind person responsible for maintaining dataoPolitely request data files and/or feedsoDetermine how to get updates to data filesoAsk if existing systems have APIs
Data – You’re soaking in it
oAdobe Acrobat filesoCAD filesoMap image files (GIF, PNG, JPEG…)oAdobe Flash filesoLocation image filesoText files oSpreadsheet filesoRDBMS databasesoXML / JSON feeds
Coping With Data – Project
oMake building points your first iterationoChoose source(s) of building informationoUse static data for building informationoLeave additional layers for future iterationsoLeave dynamic data for future iterations
Coping With Data - Code
oTenets of Open Source (and online maps!)
Release Early Release Often Update continuously Add incremental features / views / data
Coping With DataGoogle.com My Maps
Google.com Map Benefits
oNo coding experience neededoMulti-user collaboration toolsoExposed and exportable dataoData privacy controlsoIncreased visibility on default Google mapsoCan embed and link maps immediately
Self Hosting 101
oCreate standard HTML page with brandingoUse Google’s embed code to load map
Self Hosting 201
oGet KML file from your Google MapoCreate HTML page with “Hello World” MapoChange lat / long of map center to your campusoChange zoom level to cover desired areaoAdd KML layer using API
Self Hosting Grad. Colloquium
oConsume raw XML, RSS, JSON to add layersoCreate markers, polygons dynamicallyoAdd dynamically visible layersoAdd search functionsoAdd query string parsingoUse maps API tools to add advanced widgetsoAdd geolocation, panoramas, and directions
The Perfect Team
oGraphic DesignersoWeb UI / UX specialistsoWeb programmers (client and server side)oHuman factors specialists / testersoGeographers / Urban plannersoMarketers
The “I don’t have that” Team
oWeb programmeroGraphic designeroMarketer
The “No, really, I don’t have that” Team
oFaculty / Staff PMoTech savvy
student Never underestimate the motivation of a bored, talented student to be paid for real world resume improving experience.
Remember Data Contributors
oData owners are stakeholdersoWant additional visibility maps provideoWant their area presented accuratelyoWant their area presented welloPrototypes, prototypes, prototypes
Tools to Help
oJavaScript libraries jQuery, MooTools, Prototype, Dojo
oPhp.jsoGoogle Maps Utility Library v3oGoogle Maps Mashup Creators
Crowdsourcing Updates
oNeed simple, fast, friendly update requestoNeed way to simply propose editsoProvide editable version of current dataoRich Text Editors are your friendoPackage original, proposed update, diff off to active map maintainers
Resources
oGoogle Maps DocumentationoGoogle Maps API TutorialoUsing the Google Maps API V3oOfficial Google Maps API BlogoGoogle JavaScript Maps API V3 Google GroupoStack Overflow
Photo Credits
oB’s Barbecue Road Sign Flickr: E Wayne
