Your SlideShare is downloading. ×
Google Maps API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Google Maps API

4,961
views

Published on

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 …

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.

Published in: Technology, News & Politics

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,961
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
223
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 9. Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009
    • Plusses
    • You can't beat the price
    • Most users are familiar with it
    • It's powerful
    • Google's products are generally reliable
  • 10. Google Maps :: Dave Ross :: The West Suburban Chicago PHP Meetup :: suburbanchicagophp.org :: January 8, 2009
    • 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
  • 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)