Client Side, Server Side, API

Notes

Links

- Google Maps Javascript API v3 Getting Started : has tutorials, and API reference, and Code Samples

- googlemaps mania: blogs for cool google maps
- APIs at programmable web
- Mashups Directory at programmable web -- "A mashup, in web development, is a web page, or web application, that uses content from more than one source to create a single new service displayed in a single graphical interface" [from wikipedia]
Notes

API key

Get API Key from Google

- "Free until exceeding 25,000 map loads per 24 hours"

- From FAQ: "If you exceed the usage limits of a given Maps API, the API will return an error message. If you repeatedly exceed the limits, your access to the API may be temporarily blocked."
Notes

Google Map 01

01_googlemap.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;

      function initMap() {

        var maparea = document.getElementById('map');

        var options = {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        };

        map = new google.maps.Map(maparea, options);
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"
            async defer></script>
  </body>
</html>
Notes

02 Changing/Setting Values

[02_googlemap.html]

Changing values and getting Values using javascript 



function initMap() {
  var map;

  var options = {
    center: new google.maps.LatLng(37.09, -95.71),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  map = new google.maps.Map(document.getElementById('map'), options);


  //event handler for button 1
  document.getElementById('getValues').onclick = function(){
    alert("Current Zoom level is " + map.getZoom());
    alert("Current Center is " + map.getCenter());
    alert("The current mapType is " + map.getMapTypeId());
  }

  //event handler for button 2
  document.getElementById("changeValues").onclick = function(){
    var options = {
      center:new google.maps.LatLng(45.4809680038112, -122.63033866882324),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    map.setOptions(options);
  }
}


using jQuery for the event handler [02_googlemap_jq.html] 


function initMap() {
  var map;

  var options = {
    center: new google.maps.LatLng(37.09, -95.71),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  map = new google.maps.Map(document.getElementById('map'), options);

  $('#getValues').click(function(){
       alert("Current Zoom level is " + map.getZoom());
       alert("Current Center is " + map.getCenter());
       alert("The current mapType is " + map.getMapTypeId());
  });


  $('#changeValues').click(function(){

       var options = {
       center:new google.maps.LatLng(45.4809680038112, -122.63033866882324),
       zoom: 18,
       mapTypeId: google.maps.MapTypeId.SATELLITE
       }

       map.setOptions(options);
   });


}
Notes

03 Markers

03_marker_googlemapv2.html

Here we are 1. creating a map, 2. creating a marker, 3. creating an info window, and 4. attaching an event handler to the marker so that when the marker is clicked, the infowindow opens 

function initMap() {
  var map;

  var options = {
     zoom: 16,
     center: new google.maps.LatLng(45.481, -122.6303),
     mapTypeId: google.maps.MapTypeId.ROADMAP
  };



  map = new google.maps.Map(document.getElementById('map'), options);

  // Object literal containing the properties for the marker
  var marker_options = {
     position: new google.maps.LatLng(45.481, -122.6303),
     map: map,
     title: 'Click me'
  };

   // Adding a marker to the map
  var marker = new google.maps.Marker(marker_options);


  // Object literal containing the properties for the info window
  var infowindow_options = {
        content: 'Hello world'
  };

   // Creating an InfoWindow with the content text: "Hello World"
  var infowindow = new google.maps.InfoWindow(infowindow_options);

   // Adding a click event to the marker
  google.maps.event.addListener(marker, 'click', function() {
     // Calling the open method of the infoWindow
     infowindow.open(map, marker);
  });

}
Notes

04 MORE MARKERS AND INFOWINDOW

04_div_googlemap.html

In this example, we create an 'div' HTML Element and display it in the infowindow.

04_video_googlemap.html

In this example, we create a 'video' HTML Element and display it in the infowindow.

Notes

05 Mashup: Google Maps + Flickr

List of commonly used APIs

flicker photo search
gmap_flickr.html 
var lat = 0;
var long = 0;

$(document).ready(function(){

//Connects to the Flickr API and reads the results of the query into a
//JSON array. This query uses the 'flickr.photos.search' method to
//access all the photos in a particular person's user account. It also
//uses arguments to read in the latitude and longitude of each
//picture. It passes the resultant JSON array to the 'displayImages3'
//function below.

// see https://www.flickr.com/services/api/explore/flickr.photos.search
// how the URLs are generated. They include querys after the URL.

// YOU NEED TO CHANGE THE API KEY TO YOUR OWN
// api_key=5acfba331f0f592f105a1d6f5c12f217

// search for reed college
var URL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=5acfba331f0f592f105a1d6f5c12f217&tags=reed+college&has_geo=1&extras=geo&format=json&nojsoncallback=1";

// search for portland oregon
// var URL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=5acfba331f0f592f105a1d6f5c12f217&tags=portland+oregon&has_geo=1&extras=geo&per_page=20&format=json&nojsoncallback=1"


// send request to flicker, set displayImages() as callback function
$.getJSON(URL, displayImages);
           

// displayImages: call back function
function displayImages(data){


                    //Loop through the results in the JSON array. The 'data.photos.photo' bit is what you are trying to
                    //'get at'. i.e. this loop looks at each photo in turn.
                    // i: index
                    // item: the data.photos.photo object

                    $.each(data.photos.photo, function(i,item){

                      //Read in the lat and long of each photo and stores it in a variable.
                      lat = item.latitude;
                      long = item.longitude;

                      //Get the url for the image.
                      var photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';      
                      htmlString = '<img src="' + photoURL + '">';                    
                      var contentString = '<div id="content">' + htmlString + '</div>';

                      //Create a new info window using the Google Maps API
                      var infowindow = new google.maps.InfoWindow({
                           //Adds the content, which includes the html to display the image from Flickr, to the info window.
                           content: contentString
                      });

                      //Create a new marker position using the Google Maps API.
                      var myLatlngMarker = new google.maps.LatLng(lat,long);

                      //Create a new marker using the Google Maps API, and assigns the marker to the map created below.
                      var marker = new google.maps.Marker({
                      position: myLatlngMarker,
                      map: myMap,
                      title:"Photo"
                    });
  
                      //Uses the Google Maps API to add an event listener that triggers the info window to open if a marker is clicked.
                      google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(myMap,marker);
                    });                 
        });                 
}

});
Notes

06 (geolocation, mobile)

06_jquerymultipage.html: Interface for mobile devices using jQuery mobile

-- jQuery Mobile : "Touch-Optimized Web Framework for Smartphones & Tablets"

08_geolocationapp_html5.html: using HTML5's geolocation feature. (I cannot turn on the geolocation feature on Chrome once I turned it off when it is local. Try Safari or Firefox if it does not work).

Notes

Data on the Web

Notes

07 (Layers)

Samples from Google

Layers on GoogleMap

Notes

Final Lab

Choose a place. Get your own API key. Make a web page that shows the place on google maps with some info window with content associated with the place
Notes