Question

im trying to apply this JSON code to my Google Map:

[ { stylers: [ { hue: "#ff0000" } ] } ]

generated from this website:

That is actually made by Google, the problem is that i dont know enought about JSON to know how i apply this code and i cant find any examples using this kind of code.

Grateful for any tips or answers! 🙂

Answer 1

Yeah, I think it’s not so obvious. It doesn’t help that in #9 of the Wizard, they write “style” when it should be “styles”.

In the Hello World example ( https://developers.google.com/maps/documentation/javascript/tutorial ), change the myOptions, adding the comma after mapTypeId, then the option “styles: ” and paste the JSON.

  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [ { stylers: [ { hue: "#ff0000" } ] } ]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }