Google Map API

Client Side, Server Side, API

Client-Server model

As opposed to.... P2P
Client side programming:
What we've been doing. The code/text gets fetched from the server. It is interpreted/executed on the client (browswer)

Frameworks (think professional/commercial looking websites):
- React -- is an open-source, front end, JavaScript library for building user interfaces or UI components
- Vue -- open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
- Angular
General Purpose Library:
- jquery, jqueryUI, jquerymobile -- "It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers."
Javascript library to make certain things much more easier to do
- p5.js -- drawing, animating. (think processing but with javascript)
- threejs.org -- 3D
- for games, animation, data visualization, machine learning...etc
Server Side programming:
Common configuration:
- Database (MySQL)
- Web Server (Apache)
- Serverside Scripting (PHP)
- MAMP for Mac (packages that comes with all three)
Server side scripting languages/environments:
- PHP tutorial
- Ruby, Java, c#, javascript (node.js)....
Communicating with servers that provide services beyond Web/HTTP.
There are servers on the Internet that provide higher-level services than HTTP. For example, social media sites or search engines provide higler-level services. There are rudimentary ways to communicate to your/other servers with javascript. For example, using low level functions to communicate to server
- .load(); // load an HTML from a server
- .get(url, data, callback) // GET method (send and recieves data. Call callback function once complete)
- .post(url, data, callback) // POST method (send and recieves data. Call callback function once complete)
- .getJSON() // GET JSON
  
  With low-level functions you need to:
  1. Figure out how to construct a request specific to the services provided by the server
  2. Figure out how to make sense of the response (eg. XML, JSON)
  Here is an example of a request to a reddit server. If you take a look at the developer tools console, you will see the content of the json object (named data)
Using API

If provided by the service, you can use methods that communicate at the level of abstraction of the service. (eg. level of maps, rather than JSON and all the raw data associated with creating maps). That is part of what an API: Application Programming Interface does.

I should add that things are not that simple for many servers that require authentication. Twitter, for example, requires requests to be authenticated. That forces you to do server side programming (authenticate to Twitter from your server - you don't want passwords to be embedded in your HTML pages)

Notes

Getting Started with Google Maps

Get API Key
Getting started with Google Maps Platform
Google Maps Javascript API Getting Started : has tutorials, and API reference, and Code Samples

Notes

Google Map 01

<!DOCTYPE html>
<html>
  <head>
<title>Simple Map</title>

    /* this is how you link the API */
      <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" defer >
     </script>

      
    <style type="text/css">
      /* 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>


      
    <script>
       /* let and var are interchangeable for the sake of class. Scope slightly different. let more strict */ 
      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
   </script>

      
  </head>
  <body>
    <div id="map"></div>
  </body>

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);
  }
}

Notes

03 Markers

03_marker_googlemapv1.html

Here we are creating a map and creating a marker


  //const a stricter version of var.
  //const specifies a variable but tells javascript that it is a 'constant' (will not change over time)
  
function initMap() {
  var map;

  const 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
 
  const marker_options = {
     position: new google.maps.LatLng(45.481, -122.6303),
     map: map,
     title: 'Click me'
  };

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

}

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;

  const 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
 
  const marker_options = {
     position: new google.maps.LatLng(45.481, -122.6303),
     map: map,
     title: 'Click me'
  };

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


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

   // Creating an InfoWindow with the content text: "Hello World"
  const 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

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)

You need to have location services turned on, on your computer (at least Macs) or smartphone.

HTML5's geolocation feature. You may need to use https (secure encrypted http protocol) on Chrome.

<script>
var myDiv;

window.onload = function(){

  myDiv = document.getElementById('myDiv');

  if (navigator.geolocation){
          navigator.geolocation.getCurrentPosition(showPosition);
  }
  else {
    myDiv.innerHTML = "Geolocation is not supported by this browser.";
  }
}



function showPosition(position){
  myDiv.innerHTML = "Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude;
}
</script>

08_simple_geolocation_html5.html: Getting location and print into a DIV

08_geolocation_html5.html: Getting location and sending the coordinate to Google Maps

Notes