.gmap-container { border: 4px double rgba(0, 0, 0, 0.5); height: 300px; width: 100%; margin-bottom: 30px; overflow: hidden; } .googlemappa iframe { width: 100%; } .googlemappa p { margin: 0; }
<iframe>{{GOOGLE IFRAME EMBED}}</iframe>
Last active
October 19, 2015 04:29
-
-
Save ccurtin/b23b07f8b49bd2bea0da to your computer and use it in GitHub Desktop.
google map 100% width of container
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Snazzy Maps Super Simple Example</title> | |
| <style type="text/css"> | |
| /* Set a size for our map container, the Google Map will take up 100% of this container */ | |
| #map { | |
| width: 750px; | |
| height: 500px; | |
| } | |
| </style> | |
| <!-- | |
| You need to include this script tag on any page that has a Google Map. | |
| The following script tag will work when opening this example locally on your computer. | |
| But if you use this on a localhost server or a live website you will need to include an API key. | |
| Sign up for one here (it's free for small usage): | |
| https://developers.google.com/maps/documentation/javascript/tutorial#api_key | |
| After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key. | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&sensor=false"></script> | |
| --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <script type="text/javascript"> | |
| // When the window has finished loading create our google map below | |
| google.maps.event.addDomListener(window, 'load', init); | |
| function init() { | |
| // Basic options for a simple Google Map | |
| // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions | |
| var mapOptions = { | |
| scrollwheel: false, | |
| navigationControl: false, | |
| mapTypeControl: false, | |
| scaleControl: false, | |
| draggable: false, | |
| // How zoomed in you want the map to start at (always required) | |
| zoom: 11, | |
| // The latitude and longitude to center the map (always required) | |
| center: new google.maps.LatLng(-1.2994747, 36.762962, 17.08), // New York | |
| // How you would like to style the map. | |
| // This is where you would paste any style found on Snazzy Maps. | |
| styles: [{ | |
| "featureType": "landscape", | |
| "stylers": [{ | |
| "hue": "#FFBB00" | |
| }, { | |
| "saturation": 43.400000000000006 | |
| }, { | |
| "lightness": 37.599999999999994 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }, { | |
| "featureType": "road.highway", | |
| "stylers": [{ | |
| "hue": "#FFC200" | |
| }, { | |
| "saturation": -61.8 | |
| }, { | |
| "lightness": 45.599999999999994 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }, { | |
| "featureType": "road.arterial", | |
| "stylers": [{ | |
| "hue": "#FF0300" | |
| }, { | |
| "saturation": -100 | |
| }, { | |
| "lightness": 51.19999999999999 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }, { | |
| "featureType": "road.local", | |
| "stylers": [{ | |
| "hue": "#FF0300" | |
| }, { | |
| "saturation": -100 | |
| }, { | |
| "lightness": 52 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }, { | |
| "featureType": "water", | |
| "stylers": [{ | |
| "hue": "#0078FF" | |
| }, { | |
| "saturation": -13.200000000000003 | |
| }, { | |
| "lightness": 2.4000000000000057 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }, { | |
| "featureType": "poi", | |
| "stylers": [{ | |
| "hue": "#c4b98b" | |
| }, { | |
| "saturation": -1.0989010989011234 | |
| }, { | |
| "lightness": 11.200000000000017 | |
| }, { | |
| "gamma": 1 | |
| }] | |
| }] | |
| }; | |
| // Get the HTML DOM element that will contain your map | |
| // We are using a div with id="map" seen below in the <body> | |
| var mapElement = document.getElementById('map'); | |
| // Create the Google Map using our element and options defined above | |
| var map = new google.maps.Map(mapElement, mapOptions); | |
| var iconBase = ''; | |
| // Let's also add a marker while we're at it | |
| var marker = new google.maps.Marker({ | |
| position: new google.maps.LatLng(-1.2994747, 36.762962, 17.08), | |
| map: map, | |
| title: 'Argura.co', | |
| icon: iconBase + 'Argura-Web-App-Development-Kenya.png' | |
| }); | |
| google.maps.event.addListener(marker, 'click', function() { | |
| // run some jQuery on marker click! | |
| //or infoWindow.. part of API | |
| doStuff(); | |
| }); | |
| function doStuff(){ | |
| jQuery("*").fadeOut(); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Snazzy Maps Super Simple Example</h1> | |
| <!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. --> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment