Posted By

burnandbass on 04/03/12


Tagged


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

ManoelLiberato
spee66
BrockSamsom
Priestd09
mrb23771
smvnet


Fullscreen Google Maps Background


 / Published in: jQuery
 

This is the whole HTML page with JS/CSS embeded, uses Google Maps API V3

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Google Maps JavaScript API v3 Fullscreen Background</title>
  5. <meta name="viewport"
  6. content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <meta charset="UTF-8">
  8. <style type="text/css">
  9.  
  10. iframe {
  11. vertical-align: top;
  12. }
  13.  
  14. #canvas_holder{
  15. position: fixed;
  16. top: 0px;
  17. left: 0px;
  18. width:100%;
  19. height:100%;
  20. z-index: 0;
  21. }
  22.  
  23. #map_canvas{
  24. width:100%;
  25. height:100%;
  26. position: "absolute";
  27. top: 0px;
  28. left: 0px;
  29. overflow: "hidden";
  30. }
  31.  
  32. #holder{
  33. width: 300px;
  34. background: rgba(0,0,0,0.8);
  35. z-index: 1000;
  36. position: absolute;
  37. color: white;
  38. padding: 10px;
  39. border-radius: 10px;
  40. -moz-border-radius: 10px;
  41. -o-border-radius: 10px;
  42. -webkit-border-radius: 10px;
  43. -ms-border-radius: 10px;
  44. }
  45.  
  46. a{
  47. color: white;
  48. }
  49. }
  50. </style>
  51.  
  52. <script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  53. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  54.  
  55. <script type="text/javascript">
  56.  
  57. /*
  58. Global
  59. */
  60. var map;
  61.  
  62. function initialize() {
  63.  
  64. /*
  65. Basic Setup
  66. */
  67.  
  68. var latLng = new google.maps.LatLng(48.825183,2.1975769);
  69.  
  70. var myOptions = {
  71. panControl: false,
  72. zoomControl: false,
  73. mapTypeControl: false,
  74. scaleControl: false,
  75. streetViewControl: false,
  76. overviewMapControl: false,
  77. draggable: true,
  78. disableDoubleClickZoom: true, //disable zooming
  79. scrollwheel: false,
  80. zoom: 20,
  81. center: latLng,
  82. mapTypeId: google.maps.MapTypeId.HYBRID // ROADMAP; SATELLITE; HYBRID; TERRAIN;
  83. };
  84.  
  85. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  86.  
  87. /*
  88. MARKER
  89. */
  90.  
  91. /*
  92. //for custom image
  93. var image = 'yourflag.png';
  94. icon: image
  95.  
  96. //for animation marker drop
  97. animation: google.maps.Animation.DROP
  98.  
  99. */
  100. var markerlatlng = new google.maps.LatLng(48.825183,2.1975769);
  101.  
  102. var marker = new google.maps.Marker({
  103. position: markerlatlng,
  104. title:"Hello World!"
  105. });
  106.  
  107. marker.setMap(map);
  108.  
  109. /*
  110. INFO Bubble
  111. */
  112.  
  113. myInfoWindowOptions = {
  114. content: '<div class="info-window-content"><h4>Hello! I am a Google Map custom marker</h4></div>',
  115. maxWidth: 275
  116. };
  117.  
  118. infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
  119.  
  120. google.maps.event.addListener(marker, 'click', function() {
  121. infoWindow.open(map,marker);
  122. });
  123.  
  124. google.maps.event.addListener(marker, 'dragstart', function(){
  125. infoWindow.close();
  126. });
  127.  
  128. infoWindow.open(map,marker);
  129.  
  130.  
  131. }//end initialize
  132.  
  133.  
  134. /*
  135. onLoad
  136. */
  137. $(function(){
  138. initialize();
  139.  
  140. $("#zo").click(function(event){
  141. event.preventDefault();
  142. map.setZoom( map.getZoom()-1 );
  143. //map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
  144. });
  145.  
  146. $("#zi").click(function(event){
  147. event.preventDefault();
  148. map.setZoom( map.getZoom()+1 );
  149. });
  150.  
  151. $("#gt").click(function(event){
  152. event.preventDefault();
  153. var lt1 = new google.maps.LatLng(36.114739, -115.171840);
  154. //map.setZoom( 16 );
  155. map.panTo(lt1);
  156. });
  157.  
  158. });
  159.  
  160. </script>
  161.  
  162. </head>
  163. <body>
  164.  
  165. <div id="holder">
  166. <a href="#" id="zi">Zoom In</a>
  167. <a href="#" id="zo">Zoom Out</a>
  168. <a href="#" id="gt">GoTo</a>
  169. </div>
  170.  
  171. <!--Google Maps APIv3 Background-->
  172. <div id="canvas_holder">
  173. <div id="map_canvas"></div>
  174. </div><!-- End Google Maps Background -->
  175.  
  176. </body>
  177. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: mangolino on June 25, 2013

How ca I add marker? I want 2 markers.

Posted By: sonia139 on September 12, 2018

No there are many ready meant css or plug-in of google map which can use in HTML5 page.

kindergarten school in karachi

Posted By: on November 22, 2019

Google maps are really amazing technology. Social Media Marketing Company Dubai provide the best services among others.

Posted By: oloviagrace3233 on December 13, 2019

Best App to Earn Free Gift Card Rewards | Shopkick|Shopkick users get free gift cards for Amazon, Target, Walmart, Starbucks, Best Buy, Sephora, Lowe’s 2020. Free Gift Card Free Gift Card Gift Card 2020 Gift Card2020

You need to login to post a comment.