Question

I have been using google maps for a web app where we enter our own custom location data for markers, and have been noticing that in higher zoom settings, the google maps data shines through, literally taking away the whole point of having custom map data.

I am using gmaps4rails, and have the gmaps JSON code, from the Google Maps API v3 Styled Maps JSON editor, and cannot get the right callback area for this.

Any ideas where I should be placing this? The callback is not allowing for this to work. (and I suck at JS)

Thanks!

Answer 1

Ok I took an example from here. Just do:

<script type="text/javascript" charset="utf-8">
Gmaps.map.callback = function() {
var pinkParksStyles = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },
  {
    featureType: "poi.park",
    stylers: [
      { hue: "#ff0023" },
      { saturation: 40 }
    ]
   }
  ];

  Gmaps.map.map.setOptions({styles: pinkParksStyles});
}
</script>

Another solution instead of using the callback:

<script type="text/javascript" charset="utf-8">
var pinkParksStyles = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },
  {
    featureType: "poi.park",
    stylers: [
      { hue: "#ff0023" },
      { saturation: 40 }
    ]
  }
];
</script>

<%= gmaps(:map_options => { :raw => "{styles: pinkParksStyles}" },
          #... whatever you need
    )
%>