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

Google Maps API

on

  • 15,118 views

Google Maps API basic and advanced examples.

Google Maps API basic and advanced examples.

Statistics

Views

Total Views
15,118
Views on SlideShare
15,055
Embed Views
63

Actions

Likes
4
Downloads
244
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
  • 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