• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Maps API
 

Google Maps API

on

  • 15,007 views

Google Maps API basic and advanced examples.

Google Maps API basic and advanced examples.

Statistics

Views

Total Views
15,007
Views on SlideShare
14,944
Embed Views
63

Actions

Likes
4
Downloads
242
Comments
1

2 Embeds 63

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Simple and go to the point...excelent!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google Maps API Google Maps API Presentation Transcript

    • 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
    • The Basics
      • Sign up for an API key
      • Load the Map API
      • Add Map Controls
      • Load KML
      HUGE / Google Maps API
    • 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
    • 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
    • Add Map Controls
      • map.addControl(new GLargeMapControl());
      • map.addControl(new GMapTypeControl());
      • GSmallMapControl(), GLargeMapControl(), GSmallZoomControl(),
      • GScaleControl(), GMapTypeControl()…
      HUGE / Google Maps API
    • 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
      • Test you KML file:
      • http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml
      Load KML HUGE / Google Maps API
      • var kml = new GGeoXml(“huge.kml&quot;);
      • map.addOverlay(kml);
      Load KML within API HUGE / Google Maps API
    • 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
    • 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
    • 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
    • Change Map Type
      • map.setMapType(G_NORMAL_MAP);
      • G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP…
      HUGE / Google Maps API
    • Load StreetView Layer
      • var streetView = new GStreetviewOverlay()
      • map.addOverlay(streetView);
      HUGE / Google Maps API
    • Load StreetView Panorama
      • var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;));
      • streetView.setLocationAndPOV( marker.getLatLng() );
      HUGE / Google Maps API
    • 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
    • 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
    • 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