Google Maps API

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Google Maps Dave Ross

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Dave Ross “ I grew up around computers, fell in love with the Internet way back in 1994, and built a successful career around my interests in computers and business. My career focus has been on e-commerce, and in my personal time I study issues related to digital identity, trust, and reputation tracking. I’m also a cat shelter volunteer, a small business owner, an avid Scrabble player, and a b-movie junkie.” 10 years professional development experience PHP developer, certified Java developer LinkedIn Profile: http://www.linkedin.com/in/daverossfromchicago

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Most people know Google Maps from the website maps.google.com

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 It's how those of us without GPS in our cars get directions

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Google Maps is also an API that you can use on your own sites

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Actually, it's a family of APIs that work together GMap2 GClientGeocoder GDirections GMarker GPolygon Glog

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Implemented in Javascript and Flash (Actionscript 3.x) Actionscript 2.x is deprecated.

Plusses

You can't beat the price

Most users are familiar with it

It's powerful

Google's products are generally reliable

Some Restrictions Apply!

Can only use it on free, public pages unless you pay

Geolocation API for use drawing on maps

You need a free API key registered to your URL

It's a beta, and probably will be forever

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 That's very nice. But how about some code?

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 <script src=" http://maps.google.com/maps?file=api&v=2&key ={API key}" type="text/javascript"></script>  <div class="map" id="my_map" style="position: static;width: 400px;height: 400px;"></div> <script type="text/javascript"> // Display the Google Map in the empty div with id my_map $(document).ready(function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("my_map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng("1600 Pennsylvania Avenue NW, Washington, DC 20500", function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); }); } }); </script>

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Break it down!

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Pull in the Google Maps Javascript code <script src=" http://maps.google.com/maps?file=api&v=2&key ={API key}" type="text/javascript"></script>

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Make a placeholder <div> (The map goes inside it)  <div class="map" id="my_map" style="position: static;width: 400px;height: 400px;"></div>

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 I'm using jQuery. This just how you tell jQuery to run this when the page loads // Display the Google Map in the empty div with id my_map $(document).ready(function() {

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Google Maps API can check If the browser supports it if (GBrowserIsCompatible()) {

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 “ Hey, Google, gimme a map and put it in that <div>” var map = new GMap2(document.getElementById("my_map"));

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 GclientGeocoder takes an address and converts to lat/long (a GPoint object) var geocoder = new GclientGeocoder(); geocoder.getLatLng("1600 Pennsylvania Avenue NW, Washington, DC 20500", function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); } );

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 GclientGeocoder's second parameter is a function to run after geocoding the address. var geocoder = new GclientGeocoder(); geocoder.getLatLng("1600 Pennsylvania Avenue NW, Washington, DC 20500", function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); } );

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 Displaying a non-draggable map of that location function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); }

Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009 More information http://code.google.com/apis/maps/ http://googlegeodevelopers.blogspot.com/ http://googlemapsapi.blogspot.com/ (retired)