Google Styled Maps WordPress
- REFUNDED
Hi There,
I am currently using a Map plugin (see below) on my Wordpress site and need some help using the Google API to style it slightly.
http://codecanyon.net/item/wild-google-maps/4045150?WT.ac=portfolio_thumb&WT.seg_1=portfolio_thumb&WT.z_author=Studio_WiLD
I would like to make water (sea) gray and the land white.
Gray: #cccccc
Here is the doc for the API:
https://developers.google.com/maps/documentation/javascript/styling
The url for my project is in screenshot attached.
Please let me know if you would like to help me achieve this.
Many Thanks
******** I HAVE ACTUALLY UPDATED THE PLUGIN AND IT HAS ADDED THE FUNCTIONALITY I WAS LOOKING FOR!! **********
Answers (3)
juan manuel incaurgarat answers:
This is the code you need to change the colors.
[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: "#cccccc" }
]
},
{
featureType: "landscape.natural.landcover",
stylers: [
{ hue: "#ffffff" }
]
}
]
Maybe you can ask the developer @codecanyon how to use it in their plugin. Or some other user here can do it for you :)
Good luck!
Dbranes answers:
You have this code in <em>/wp-content/plugins/wild-googlemap/wild-googlemap-js.js</em>
this.init = function()
{
// Render map
var options =
{
zoom: this.zoom,
center: new google.maps.LatLng(this.lat, this.lng),
mapTypeId: this.mapTypeId,
mapTypeControl: this.mapTypeControl,
streetViewControl: this.streetViewControl,
zoomControl: this.zoomControl,
panControl: this.panControl,
scaleControl: this.scaleControl,
rotateControl: this.rotateControl,
overviewMapControl: this.overviewMapControl,
draggable: this.draggable,
scrollwheel: this.scrollwheel
};
this.map = new google.maps.Map(document.getElementById(this.mapcode), options);
this.map.mapcode = this.mapcode;
}
you could try to add this line at the bottom of the init function:
this.map.setOptions({styles: styles});
where you can first try out the style in the Google Map example:
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
and then you can use the style proposed by @Juan above.
