lesson 5/jQuery & Javascrpt

lesson 5

HTML Google Maps: 

<div class="gmaps">
 <iframe
   width="275"
   height="150"
   frameborder="0" style="border:0"
   src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDjenMNMxYamTc3d9Ol6jOOUa7FlldHIng&q=Space+Needle,Seattle+WA">
 </iframe>
</div>

JavaScript Google Maps:

var map;
function initialize() {
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(36.147247, -115.156031),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.setTilt(45);
 };

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

JavaScript: Google Maps Marker constructor code snippet (to be placed within intialize function) 

var marker = new google.maps.Marker({
  	position: map.getCenter(),
  	map: map,
  	title:'Click to zoom'
	});

  google.maps.event.addListener(marker, 'click', function() {
  	map.setZoom(15);
  	map.setCenter(marker.getPosition());
  });
};