An introduction to using the Google Maps API in Javascript. Includes sample code. Presented at the West Suburban Chicago PHP Meetup on January 9, 2009. Visit us on the web at suburbanchicagophp.org.

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

2. 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

3. 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

4. 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

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

6. 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

7. 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

8. 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.

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

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

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

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

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

16. 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() {

17. 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()) {

18. 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(&quot;my_map&quot;));

19. 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(&quot;1600 Pennsylvania Avenue NW, Washington, DC 20500&quot;, function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); } );

20. 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(&quot;1600 Pennsylvania Avenue NW, Washington, DC 20500&quot;, function(point) { map.setCenter(point, 14); // “14” is the zoom level map.addOverlay(new GMarker(point, {clickable: false, draggable: false})); map.disableDragging(); } );

21. 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(); }

22. 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)