// JavaScript Document

window.onload = function(){
 //googlemap is the id of the placeholder in map.html
 if(document.getElementById('googlemap')){ 
  //your office coordinates latitude / longitude, if you change the variable name, you will also need to update line 8 and 14
  var office = new google.maps.LatLng(38.420858,-122.753824); 
  // zoom level defines the default scale of the map, the center is aligned to the coordinates from the previous line, the backgroundColor is the colour of the placeholder while the map loads (make it the same colour as your website background
  var mapOptions = { zoom: 14, center:office, backgroundColor: "#ffffff" };
  // generates map with the options defined above
  var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
  // this is the InfoWindow (speech bubble) that contains the logo, it can contain HTML instead of an image
  // adding a style="display:block" to fix the wrong size issue when InfoWindow only contains an image
  var infowindow = new google.maps.InfoWindow({ content: '<div class="info-window-content"><h3><img src="http://www.osseon.com/wp-content/themes/platformbase/images/osseon_logo_small.png" width="150px" height="36px" alt="Osseon Therapeutics, Inc."></h3><p>2330 Circadian Way<br />Santa Rosa, California 95407-5415</p></div>'});
  //the marker. If you do not want the marker to bounce, simply deleted the line that contains animation: google.maps.Animation.BOUNCE and uncomment the one below
  var marker = new google.maps.Marker({ position:office, map: map}); 
  //opens the InfoWindow, not needed if InfoWindow is not used
  infowindow.open(map,marker);
  //move the center of the map left and down to allow space to view the infowindow, not needed if InfoWindow is not used

  //function that makes the marker stop bouncing when clicked (it can be annoying). Delete it if not using the bouncing marker
  google.maps.event.addListener(map, 'zoom_changed', function() { 
  	setTimeout(moveMap, 10);
	
  });
  function moveMap() {
	  map.panBy(10,350);
  }

  //map customisation
  //colours of the different map elements
  //change the hue hex colour to the main colour of your site and it should look ok
  var colours = [
   { featureType: "administrative", elementType: "all", stylers: [ { saturation: 40 }, { hue: "#F8991D" } ]},
   { featureType: "landscape", elementType: "all", stylers: [ { hue: "#F8991D" }, { saturation: 40 }, { lightness: 0 } ] },
   { featureType: "poi", elementType: "all", stylers: [ { hue: "#F8991D" }, { saturation: 40 } ] },
   { featureType: "road", elementType: "all", stylers: [ { hue: "#F8991D" }, { saturation: 40 } ] },
   { featureType: "transit", elementType: "all", stylers: [ { hue: "#F8991D" }, { saturation: 40 } ] },
   { featureType: "water", elementType: "all", stylers: [ { hue: "#F8991D" }, { saturation: 40 } ] } 
  ];

  //applying colours to map
  var styledMapOptions = { map: map, name: "Map"}
  var myStyledMap = new google.maps.StyledMapType(colours,styledMapOptions);

  //defining new map style
  map.mapTypes.set('colouredMap', myStyledMap);
  map.setMapTypeId('colouredMap');

  //setting up the navigation options as a dropdown with thee options: your custom map colours, satellite view and hybrid view
  map.setOptions({ mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ['colouredMap', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID] } });
 }
}