Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2013-04-03

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!

2013-04-03

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.

2013-04-03

Arnav Joy answers:

so you work is done?