[ATCompressorsParticipant]

Good afternoon,

I would very much like he change the colour of Google maps. I visited the Google Maps Styling page to acquire the URL and JSON:
https://mapstyle.withgoogle.com/

I input the HTML like so:

[map no_container="true"]<iframe src="https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=50.4307244138392,-4.950205812090644&zoom=16&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&size=480x360">
</iframe>
[/map]

Where it says “YOUR_API_KEY” in the URL, I have input my API on my website.

I placed the JSON directly into the Global JavaScript in Customizer.

At the bottom of the website, I have managed to create a greyscale version of Google Maps, but I’d rather it looks black like the dark option on the Google Maps Styling page.

You can find both of the maps I’ve created on this page:
http://aandtcompressors.com/home

The greyscale working Map is at the bottom.
But the black map that I do want to work if underneath the Slider, closer to the top of the page.

Any help you could provide would be greatly appreciated.

[RupokMember]

Hi there,

It seems your black map has something missing. Let’s try to grab the embed code again and make sure you are setting right color. Do you want it as same greyscale map as the bottom one or trying a different color?

Let us know a bit details and share the code here (wrap with code tag from Toolbar).

Thanks!

[ATCompressorsParticipant]

Hi,

Thanks for your reply, Rupok.
I’d like it so that the land on the map is very dark, whereas the roads are a light grey and names are white.
My thinking being that it would match the dark shades of my website better.
If you go to this URL: https://mapstyle.withgoogle.com/ and click on “Dark” (it’s the fourth option under “Select Theme”), you’ll see the colour format I mean.

Here are both the URL and JSON that Google provide in their styling wizard.

URL

https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=-33.9,151.14999999999998&zoom=12&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x212121&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&size=480x360

JSON

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#181818"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1b1b1b"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2c2c2c"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a8a8a"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#373737"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3c3c3c"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#4e4e4e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#000000"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3d3d3d"
      }
    ]
  }
]

[LelyModerator]

Hi There,

Upon checking, I got this message on the console:
The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key. Request received from IP address 87.98.162.23, with referer: http://aandtcompressors.com/home

Usually this will be fixed by enabling “Static Maps API” service in addition to “Google Maps API”. But since you’re using an embedded iFrames, you will need to enable the “Embed API” instead (Static is not needed if you’re only embedding).

Hope this helps.

[ATCompressorsParticipant]

I have enabled “Embed API” in the API Manager but nothing has changed.
I even tried swapping it for “Static API” and nothing changed either; I’m still left with a large black space.

[NicoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[ATCompressorsParticipant]

This reply has been marked as private.

[ATCompressorsParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the information. I have checked the page and it turns out that there is an error on the page. Please see this: http://prntscr.com/czihkx

The error message is this:

"Refused to display document because display forbidden by X-Frame-Options."

This is something related to how your map was set up. Please check out this related link for more troubleshooting ideas:
http://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options

Hope this helps.

[ATCompressorsParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because the initMap() is called earlier and it’s declared in the footer. Instead of adding your js code to customizer’s custom javascript. Let’s do it with child theme’s functions.php, let’s add this to functions.php

add_action('x_before_site_begin', 'custom_initmap_callback', -999);

function custom_initmap_callback () { ?><script type="text/javascript">

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 52.7533114, lng: -6.8098462},
          zoom: 5,
          styles: [
            {elementType: 'geometry', stylers: [{color: '#191919'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#a6190c'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#ee3424'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#ee3424'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#333333'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#808080'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#bfbfbf'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#8c8c8c'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#262626'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]
        });
  
   var contentString = '<p>Cornwall</p>';
    
     var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
    
     var myLatLng = {lat: 50.428399, lng: -4.947482};
 
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'I am a marker!'
  });
    
    marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
  
      }

</script><?php }

Cheers!

[ATCompressorsParticipant]

Hi Rad,

Thank you for your reply.
Unfortunately, this hasn’t made any difference.
The area where the map should be is blank with the Customizer both open and closed.

[RadModerator]

Hi there,

I added it and it works, cheers!

Thanks!

[ATCompressorsParticipant]

Did you? What did you add, and where? xD
I’m super thrilled that it’s working now. Thank you so much, Rad! 🙂

[RahulModerator]

Glad to hear it!

Let us know if we can help with anything else.

Thank you.

[Author]

Posts