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.
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
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
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=&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>
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=&quot; http://maps.google.com/maps?file=api&amp;v=2&amp;key ={API key}&quot; type=&quot;text/javascript&quot;></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) <!-- Google Map goes here --> <div class=&quot;map&quot; id=&quot;my_map&quot; style=&quot;position: static;width: 400px;height: 400px;&quot;></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(&quot;my_map&quot;));
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(); } );
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(); } );
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)

Google Maps API

  • 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)