Google Maps API

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    4 Favorites

    Google Maps API - Presentation 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
      • 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
    7. 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
    8. 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
    9. 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
    10. Change Map Type
      • map.setMapType(G_NORMAL_MAP);
      • G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP…
      HUGE / Google Maps API
    11. Load StreetView Layer
      • var streetView = new GStreetviewOverlay()
      • map.addOverlay(streetView);
      HUGE / Google Maps API
    12. Load StreetView Panorama
      • var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;));
      • streetView.setLocationAndPOV( marker.getLatLng() );
      HUGE / Google Maps API
    13. 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
    14. 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
    15. 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

    + mummemumme, 2 years ago

    custom

    5481 views, 4 favs, 1 embeds more stats

    Google Maps API basic and advanced examples.

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5481
      • 5478 on SlideShare
      • 3 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 91
    Most viewed embeds
    • 3 views on http://www.emanuele.musacchia.name

    more

    All embeds
    • 3 views on http://www.emanuele.musacchia.name

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories