Рендеринг в стиле Google Map

Question

Рендеринг в стиле Google Map

0

Я не могу понять, как создать стилизованную карту, чтобы я мог использовать свой массив стилей. Я использую плагин Advanced custom fields, чтобы пользователь мог войти в свои собственные местоположения, поэтому я использовал jQuery из документации для рендеринга карты. Код ниже:

// 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 );

}

Обычно я использую это для создания стилизованной карты, но я не могу заставить ее работать с вышеуказанным кодом:

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

Я понимаю, что это, наверное, просто! Хотя мне нравится узнать, почему все работает, а почему нет.

Steven_Harris_ 29 нояб. 2013, в 14:31

Источник

Теги:

jquery

google-maps

1 ответ

Ещё вопросы

Elorfin · Accepted Answer · 2013-11-29T11-45-00.000Z

Если вы проверите официальную документацию (раздел Создание стиля StyledMapType), кажется, вы забыли часть кода:

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

Вы объявляете новый StyledMap но никогда не говорите текущему экземпляру Google Maps, который он должен использовать.

Если вы не хотите переключаться между многими различными StyledMap, вы также можете установить стиль с помощью:

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

При этом втором подходе этот фрагмент кода устаревает:

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

Я никогда не использовал StyledMap в GoogleMaps, и мой ответ основан на моих других знаниях API Карт Google и документации. Это может быть неверно.

Ура приятель! map.setOptions({styles: styles}); это то, что мне нужно