Google Maps API

  • 9,369 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
9,369
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
245
Comments
1
Likes
4

Embeds 0

No embeds

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