Google Maps API
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Google Maps API

  • 15,314 views
Uploaded on

Google Maps API basic and advanced examples.

Google Maps API basic and advanced examples.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Simple and go to the point...excelent!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
15,314
On Slideshare
15,251
From Embeds
63
Number of Embeds
2

Actions

Shares
Downloads
245
Comments
1
Likes
4

Embeds 63

http://www.slideshare.net 54
http://www.emanuele.musacchia.name 9

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. 06/05/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com basic and advanced examples Google Maps API October 3rd, 2008
  • 2. The Basics
    • Sign up for an API key
    • Load the Map API
    • Add Map Controls
    • Load KML
    HUGE / Google Maps API
  • 3. Sign up for an API key
    • http://code.google.com/apis/maps/signup.html
    • Add your application URL (each domain should have a different key)
    • Get the sample code and key
    HUGE / Google Maps API
  • 4. Load the Map API
    • <script src=&quot;http://maps.google.com/maps?file=api&amp;v= 2.x &amp;key=ABQIAAAA987xac5Q2o6E_HDg_0fkXBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSIRcmJpMTmfaLEIzai7ecUONSSiQ&quot; type=&quot;text/javascript&quot;></script>
    • <script type=&quot;text/javascript”>
    • if (GBrowserIsCompatible()) {
    • var map = new GMap2(document.getElementById(&quot;map&quot;));
    • map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    • }
    • </script>
    • <div id=“map”></div>
    HUGE / Google Maps API
  • 5. Add Map Controls
    • map.addControl(new GLargeMapControl());
    • map.addControl(new GMapTypeControl());
    • GSmallMapControl(), GLargeMapControl(), GSmallZoomControl(),
    • GScaleControl(), GMapTypeControl()…
    HUGE / Google Maps API
  • 6. Load KML
    • <Placemark>
    • <name>Marker 1</name>
    • <description>
    • Some stuff to put in the first info window
    • </description>
    • <Point>
    • <coordinates>-122.1,37.4,0</coordinates>
    • </Point>
    • </Placemark>
    HUGE / Google Maps API
  • 7.
    • Test you KML file:
    • http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml
    Load KML HUGE / Google Maps API
  • 8.
    • var kml = new GGeoXml(“huge.kml&quot;);
    • map.addOverlay(kml);
    Load KML within API HUGE / Google Maps API
  • 9. Advanced Stuff
    • Add Markers with Info Window
    • Map center on markers
    • Change Map Type
    • Load StreetView Layer
    • Load StreetView Panorama
    • Load Photo and Wikipedia Layer
    • Get Directions
    HUGE / Google Maps API
  • 10. Add Markers with Info Window
    • var point = new GLatLng(43.65654,-79.90138);
    • var marker = new GMarker(point);
    • marker.html = ‘Content to display’;
    • GEvent.addListener(marker, &quot;click&quot;,
    • function(){
    • marker.openInfoWindowHtml(marker.html);
    • });
    • map.addOverlay(marker);
    HUGE / Google Maps API
  • 11. Map center on Markers
    • var bounds = new GLatLngBounds();
    • for (var i = 1; i < markers.length; i++) {
    • bounds.extend(markers[i].getPoint());
    • }
    • var center = bounds.getCenter();
    • var zoom = map.getBoundsZoomLevel(bounds);
    • map.setCenter(center,zoom);
    HUGE / Google Maps API
  • 12. Change Map Type
    • map.setMapType(G_NORMAL_MAP);
    • G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP…
    HUGE / Google Maps API
  • 13. Load StreetView Layer
    • var streetView = new GStreetviewOverlay()
    • map.addOverlay(streetView);
    HUGE / Google Maps API
  • 14. Load StreetView Panorama
    • var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;));
    • streetView.setLocationAndPOV( marker.getLatLng() );
    HUGE / Google Maps API
  • 15. Load Photo and Wikipedia Layer
    • photoLayer = new GLayer(&quot;com.panoramio.all&quot;);
    • map.addOverlay(photoLayer);
    • wikiLayer = new GLayer(&quot;org.wikipedia.en&quot;);
    • map.addOverlay(wikiLayer);
    HUGE / Google Maps API
  • 16. Get Directions
    • var gdir = new GDirections(map, document.getElementById(‘directions’));
    • var coords = “from: 43.82589,-79.1004 to 43.65654,-79.90138”;
    • var mode = G_TRAVEL_MODE_DRIVING;
    • // or G_TRAVEL_MODE_WALKING
    • gdir.load(coords, {getPolyline:true,getSteps:true,travelMode:mode});
    HUGE / Google Maps API
  • 17. References
    • http://code.google.com/apis/maps/documentation/index.html (doc)
    • http://econym.googlepages.com/index.htm (examples)
    • http://googlegeodevelopers.blogspot.com (blog)
    • http://groups-beta.google.com/group/Google-Maps-API (forum)
    HUGE / Google Maps API