Beginner’s Guide to Coding w/ Google’s Map API Corey Pieper
Download
Report
Transcript Beginner’s Guide to Coding w/ Google’s Map API Corey Pieper
Beginner’s Guide to Coding w/ Google’s Map API
Corey Pieper
Southern Region HQ
Technology Infusion Branch
[email protected]
Outline
Introduction
Rough Guidelines for Usage
Hello, World!
Adding “stuff”
Tidbits
Questions?
Intro: What is the Google Maps
API?
API: Application Programming
Interface
•A standard method where
developers can access a program
and build a program around it.
Intro:Google Maps for Enterprise
Same as free Google Maps API except:
No limitation for daily use
Can use this on non-public facing servers for
internal operational applications
Unlimited “page-views" between NOAA &
Google
NOAA Google Working Group
coordinate with implementers of NOAA's Google
Maps for Enterprise to ensure implementations
are able to maintain service throughout their
lifecycle.
Intro: Google Maps Data Flow
Example
NOAA
Webservers
Initial and all subsequent map
movements follow a client-Google
connection and DO NOT use NOAA
bandwidth.
Google Maps embedded into
NOAA websites offers a reduction
in NOAA bandwidth use while
offering enhanced services.
Google
Servers
Rough Guidelines for Usage
NWS Currently Drafting usage Policy
Use Enterprise licensing mapping service API keys
○ individual account API keys should not be
used
Data will be made available in industry
standard formats
○ data will be made available in standard
formats such as KML/KMZ or
Geographically Encoded Objects for
RSS feeds (GeoRSS).
○ A link to the data will be provided in the lower right corner of the Web mapping
service application.
Data layers will have a legend.
○ explaining meanings of symbols, areas, and colors used to convey
information.
(NWS) Disclaimer link. Immediately to the lower right of any third party Web map
will be a link to the NWS standard disclaimer posted at
http://www.weather.gov/credits.php#googlemapping
Hello, World!
Google API Starter Code
A lot of this code is boilerplate stuff
3 important parts to note…
Hello, World!
1. Loads elements needed for Google Maps API
•This is where you enter the “Key”
Hello, World!
https://gis.noaa.gov/
•Click “NOAA Google Maps for Enterprise”
•3 different keys found here
•only work if the machines using them
have IP addresses that resolve to a
domain ending in weather.gov, mpa.gov
or noaa.gov
•A standard “include” will be supplied for
NWS
Hello, World!
2. This division/section, or <div> tag
•Named “map”
•This section appears empty
•Is placeholder for the map
•defines its size
http://www.srh.noaa.gov/gis/googlemaps/default_google.html
Hello, World!
3. JavaScript function that we trigger using the onload(“load”); call in the
<body> tag
•
“if” statement verifies w/ “GBrowserIsCompatible” object.
•
Creates the ever-important GMap2 class
•
•
Hooks to the map <div> and assigned to variable “map”
setCenter method of the map class
•
•
Determines where to center map, and at what zoom level
GLatLng object stores lat/lon of location of marker
http://www.srh.noaa.gov/gis/googlemaps/default_google.html
Hello, World!
Drumroll, please…
http://www.srh.noaa.gov/gis/googlemaps/default_google.html
http://www.srh.noaa.gov/gis/googlemaps/default_google.html
Adding “stuff“
Creating Markers
GLatLng object stores lat/lon
of location of marker
Marker is plotted on GMap2
object using the addOverlay
method
http://www.srh.noaa.gov/gis/googlemaps/add_icon.html
Adding “stuff“
Opening Info Windows
How does a marker know it’s been
clicked?
Gevent.addListener(source, event, handler)
○
○
Source: what is acted on by the “event”
Event: What are we listening for?
○
Drag, click, etc.
Handler: what to do when the “event” happens
http://www.srh.noaa.gov/gis/googlemaps/add_icon_bubble.html
Adding “stuff“
Opening Info Windows
Our “addMarker” function is the only
thing added to the “load” function
http://www.srh.noaa.gov/gis/googlemaps/add_icon_bubble.html
Adding “stuff“
Lines
GPolyline(latlngs,
color?, weight?,
opacity?, opts?)
http:// http://www.srh.noaa.gov/gis/googlemaps/poly.html
Adding “stuff“
Polygons
GPolygon(latlngs,
strokeColor?,
strokeWeight?,
strokeOpacity?,
fillColor?,
fillOpacity?,
opts?)
http://www.srh.noaa.gov/gis/googlemaps/poly2.html
Adding “stuff“
Overlaying KML/KMZ
A GGeoXml object
adds geographic
content to the map
from an XML file (such
as a KML file) that is
hosted on a publicly
accessible web server
implements the
GOverlay interface and
thus is added to the
map using the
GMap2.addOverlay()
method.
http://www.srh.noaa.gov/gis/googlemaps/kmloverlay.html
Adding “stuff“
Image Overlays
Done using
GGroundOverlay
Only needs 2 things:
1.
2.
Image URL
GLatLngBounds(sw, ne)
http://www.srh.noaa.gov/gis/googlemaps/add_ground_overlay.html
Adding “stuff“
WMS Services
•Web Map Service (WMS)
is the production of
spatially referenced data
dynamically from
geographic information
•presented as a digital
image file for display
on a computer.
industry.
http://www.srh.noaa.gov/gis/googlemaps/radar_wms.php
Tidbits
The API and PHP
A simple example of
interaction between PHP
and the Google Maps API
http://dev.wrh.noaa.gov/forecast/MapClickG.php?map.x=199&map.y=98&minlon=-125.13&maxlon=-119.35&minlat=35.45&maxlat=39.65&mapwidth=354&site=mtr
Geocoding
http://www.srh.noaa.gov/gis/googlemaps/geocoding1.html
Reverse Geocoding
You supply the
lat/lng…it supplies
the address
Code a little more
involved…see
example, if
intrested…
http://www.srh.noaa.gov/gis/googlemaps/reverse_geocoding_1.html
Summary
This
presentation can be found here:
http://www.srh.noaa.gov/gis/googlemaps/
gmapi.ppt
Thank you for listening!
Corey Pieper
[email protected]