html - Embed Custom Fullscreen Google Map into webpage -


i want know how embed fullscreen google map webpage (as background). i'd map custom no default controls you'd use in regular google maps online interface (only able scroll mouse). here's example of i'm trying achieve:

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

any insight great. i'm new coding.

it simple, made example here http://jsfiddle.net/paulalexandru/t2f5z/ , added 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: remove controls need use disabledefaultui: true(see https://developers.google.com/maps/documentation/javascript/examples/control-disableui), make color black , white need set map style, make map fullscreen have set width , height 100%, , don't forget absolute position see in css.


Comments

Popular posts from this blog

javascript - jquery or ashx not working -

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

python 3.x - Mapping specific letters onto a list of words -