Embed Custom Fullscreen Google Map into webpage

Question

I want to know how to embed a fullscreen google map for a webpage (as background). I'd like this map to be custom with no default controls you'd use in the regular google maps online interface (only be able to scroll with mouse). Here's an example of what I'm trying to achieve:

http://www.ijb.ca/contact/

Any insight would be great. I'm new to coding.

Answer 1

It is very simple, i made an example here http://jsfiddle.net/paulalexandru/T2F5Z/ and i also added the code bellow:

HTML CODE

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

<div id="menu">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
</div>

CSS CODE

#map {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;    
}

#menu {
    position: absolute;
    top: 10px;
    left: 10px;
}

JAVASCRIPT CODE

jQuery(document).ready(function () {
    var map;

    var style = [
        {
        stylers: [
            { saturation: "-100" },
            { lightness: "20" }
        ]
        },{
        featureType: "poi",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "transit",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "road",
        stylers: [
            { lightness: "50" },
            { visibility: "on" }
        ]
        },{
        featureType: "landscape",
        stylers: [
            { lightness: "50" }
        ]
        }
    ]

    var options = {
        zoom: 7,
        center:  new google.maps.LatLng(45.50867, -73.553992),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });

});

Note: To remove the controls you need to use disableDefaultUI: true(see https://developers.google.com/maps/documentation/javascript/examples/control-disableUI), to make the color black and white you need to set the map style, to make the map fullscreen you have to set the width and height 100%, and don't forget the absolute position like you see in the css.

Answer 2

It works, but of course you should add all scripts:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>     
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>