// When the window has finished loading create our google map below            google.maps.event.addDomListener(window, 'load', init);                    function init() {                // Basic options for a simple Google Map                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions                var mapOptions = {    // How zoomed in you want the map to start at (always required)    zoom: 12,
    // The latitude and longitude to center the map (always required)    center: new google.maps.LatLng(10.731688,122.550535), // Your Location Coordinates    disableDefaultUI: true,    scrollwheel: false,
    // How you would like to style the map.     // This is where you would paste any style found on Snazzy Maps.    styles: [{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3d3d3"}]},{"featureType":"transit","stylers":[{"color":"#808080"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#b3b3b3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"weight":1.8}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#d7d7d7"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ebebeb"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#a7a7a7"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#efefef"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#696969"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#737373"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#d6d6d6"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#dadada"}]}]  };


                // Get the HTML DOM element that will contain your map                 // We are using a div with id="map" seen below in the <body>                var mapElement = document.getElementById('map');
                // Create the Google Map using our element and options defined above                var map = new google.maps.Map(mapElement, mapOptions);                var image = 'img/marker.png';                // Let's also add a marker while we're at it                var marker = new google.maps.Marker({                    position: new google.maps.LatLng(10.731688,122.550535),                    animation: google.maps.Animation.DROP,                    map: map,                    title: 'My Office',                    icon: image,                });                }