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>

Answer 3

Here is the Customized Javascript Code for Map

<script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(40.578466,-73.840963),
                    scrollwheel: false, 
                    disableDefaultUI: true,

                    styles: [{stylers:[{hue:'#2c3e50'},{saturation:250}]},{featureType:'road',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);

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

Put it at the bottom of the page and then add a div to the HTML Body

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

And the css for the Div is

#map{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:absolute;
}

Now Create any div in your HTML Markup with any class name or Id name and give it a position where you want to place with some css and if you want to restyle your map use this tool . it is pretty useful

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html