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:
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
Post a Comment