anon82
6/21/2016 - 2:52 AM
Snazzy Maps is a free repository of different color schemes for Google Maps aimed towards web designers and developers. https://snazzymaps.c
Snazzy Maps is a free repository of different color schemes for Google Maps aimed towards web designers and developers. https://snazzymaps.com/
View Demo http://jeremyschuler.com/dev/ticketfly/wp/demos/snazzy-maps/
.page #map {
display: block;
height: 600px;
width: 100%;
max-width: 800px;
margin: 40px auto 0 auto;
border: 4px solid #333;
}
<div id="map">
<iframe>
Insert Google Map Embed Code
</iframe>
</div>/* Load in header.php */
<script async defer src="https://maps.googleapis.com/maps/api/js?key=INSERTAPIKEYHERE&callback=initMap"></script>
jQuery(document).ready(function($) {
// Custom Google Map Styles | https://snazzymaps.com
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 = {
// How zoomed in you want the map to start at (always required)
zoom: 15,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(39.753375,-104.992521), // Colorado
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#26529B"},{"lightness":17}]}]
};
// 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(39.753375,-104.992521),
map: map,
title: 'Mesa Theater'
});
}
});
/*
* Conditional Scripts, load in functions.php
*/
function child_load_conditional_scripts() {
// Write Page Conditionals
if ( is_page('snazzy-maps') ){
// wp_enqueue_script( 'maps-script', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDGxt76dp7QWKBvjigL3ujkGY4cfReIyv8&callback=initMap', array(), '', true );
wp_enqueue_script( 'google-map-script', get_stylesheet_directory_uri() . '/js/google-maps.js', array(), '', true );
}
}
add_action('wp_enqueue_scripts', 'child_load_conditional_scripts');