CODEWITHSUNDEEP
jquerygoogle-maps
Steven_Harris_
Steven_Harris_

Reputation: 1121

Render styled google map

I can't figure out how to create a styled map so I can use my array of styles. I'm using the Advanced custom fields plugin so the user can enter their own locations, so I used the jQuery from the documentation to render the map. The code is below: 

// My Styles!

var styles = [
{
featureType: "administrative",
elementType: "all",
stylers: [
  { saturation: -100, }
]
}];

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 10,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
};

// create map               
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

}

I usually use this to create a styled map but I can't get it to work with the above code:

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

I realise this is probably simple! Although I like to learn why things work and why they don't.

Upvotes: 0

Views: 443

Answers (1)

Elorfin
Elorfin

Reputation: 2497

If you check the official documentation (section Creating a StyledMapType), it seems you forgot a part of the code :

  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

You declare a new StyledMap but never tell to your current Google Maps instance it must use it.

If you don't want to switch between many different StyledMap, you can also set style with :

map.setOptions({styles: styles}); // map is your current map object

With this second approach, this piece of code become obsolete :

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

I have never use StyledMap in GoogleMaps and my answer is based on my other knowledges of Google Maps API and the documentation. So it can be incorrect.

Upvotes: 1

Related Questions