info343/lectures/jsonp-apis/files/maps.js

// maps.js
// JavaScript code for Google Maps lecture example
// INFO 343, Autumn 2012
// Morgan Doocy

// When the page is ready, create a Google map.
$(document).ready(function() {
   createMap();
});

// Create a Google map in the #map_container container.
function createMap() {
   // Our starting point, a lat/lng position somewhere on the earth.
   var startingPoint = new google.maps.LatLng(47.654952, -122.308058);
   
   // An object that we'll use to specify options.
   var mapOptions = {
      center: startingPoint,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.HYBRID
   };
   
   // The DOM object we're going to put the map into.
   var mapElement = document.getElementById("map_container");
   
   // Create the map inside mapElement with options specified by mapOptions.
   var map = new google.maps.Map(mapElement, mapOptions);
   
   // Create a marker and position it in our map at the starting point.
   var marker = new google.maps.Marker({
      position: startingPoint,
      map: map,
      title: "This is a marker, yo!"
   });
   
   // Create an info window containing a paragraph.
   var $p = $('<p>').text("This is a paragraph, yo!");
   var infowindow = new google.maps.InfoWindow({
      content: $p[0] // the 0th DOM object inside the $p jQuery object
   });
   
   // Attach a click event handler to the marker we placed at the starting point
   // which tells the info window to open itself in the map next to the marker.
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
   });
}