I have WordPress site up and running, and using ACF plugin, I created Google Map field. That’s all great, but I want to change default google map style. I need some lighter â grayscale style for my site map.
I used code below from ACF documentation, and as I said it works great, but when I try to change any of styles nothing happens.
I must point that Iâm not javascript/jquery savvy so please take that in consideration.
I did go through whole google map API documentation, but I just canât make any of it. I tried bunch of stuff, and either nothing happens or I trashed google map.
So could someone just point me in right direction, or give me a sample code with explanation where to use it. Should I remove part of existing code or not, or just add additional peace of code etc?
Thanks in advance, and all the best!
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function($) {
/*
* render_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery element)
* @return n/a
*/
function render_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 11,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.TERRAIN
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker( $(this), map );
});
// center map
center_map( map );
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $marker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function initialize() {
// Create an array of styles.
var styleArray = ('mojaMapa')[
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 },
{ color: '#adc9b8'}
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
map.setOptions({styles: styles});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: (google.maps.MapTypeId.TERRAIN, 'mojaMapa')
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('mojaMapa', styledMap);
map.setMapTypeId('mojaMapa');
}
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/*
* center_map
*
* This function will center the map, showing all markers attached to this map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param map (Google Map object)
* @return n/a
*/
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
/*
* document ready
*
* This function will render each map when the document is ready (page has loaded)
*
* @type function
* @date 8/11/2013
* @since 5.0.0
*
* @param n/a
* @return n/a
*/
$(document).ready(function(){
$('.acf-map').each(function(){
render_map( $(this) );
});
});
})(jQuery);
</script>
There are so many style options you can try by this google map documentation
I made some changes in styles option, You can try your own colors.
Please update your latitude and longitude options in center option before using this code.
here is the complete js code for styling your map :
You can choose differents styles here : https://snazzymaps.com/
Change
Enjoy
You can use https://snazzymaps.com/ or google https://mapstyle.withgoogle.com. You had your style code to “styles:”.