Embed a custom full-screen Google map on a web page

Question

I want to know how to embed a google full-screen map for a web page (as background). I would like this map to be customizable with standard controls that you would use in the normal google maps online interface (only for scrolling with the mouse). Here is an example of what I'm trying to achieve:

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

Any insight would be great. I am new to coding.

Answer 1

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

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 controls, you need to use disableDefaultUI: true(see https://developers.google.com/maps/documentation/javascript/examples/control-disableUI ) so that the color is black and white, you need to install a map to make the map full screen mode, you must set the width and height to 100%, and do not forget the absolute position, as you see in css.

Answer 2

This works, but of course you have to add all the 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

Javascript

<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>

, div HTML

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

css Div

#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 the position you want to place with css in, and if you want your map to use this tool, use this tool. it is very useful

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