Skip to content

Instantly share code, notes, and snippets.

@alexsul2008

alexsul2008/index.html

Created August 15, 2016 23:34
Show Gist options
  • Save alexsul2008/ad42ba937e02aeceaf8e1ddd99c11dbf to your computer and use it in GitHub Desktop.
Save alexsul2008/ad42ba937e02aeceaf8e1ddd99c11dbf to your computer and use it in GitHub Desktop.
Download ZIP
Google Map jQuery Theme
Raw
index.html
<!-- Google Map API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOU-API-KEY&amp;sensor=false"></script>
Raw
map.js
//Google Maps Settings
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var coord_1 = $(".contacts_top .active").data("map-coord-first");
var coord_2 = $(".contacts_top .active").data("map-coord-second");
var zoom = $(".contacts_top .active").data("zoom");
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: zoom,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(coord_1, coord_2),
scrollwheel: false,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: //Paste snazzymaps.com Styles Here
[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
};
// 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);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(coord_1, coord_2),
map: map
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment