Google maps json from js to html side with data

	var json = new google.maps.StyledMapType([
	{
		"featureType": "administrative.country",
		"elementType": "geometry.stroke",
		"stylers": [
		{
			"color": "#FFF"
		}]
	},
	{
		"elementType": "labels.text.fill",
		"stylers": [
		{
			"color": "#FFF"
		},
		{
			"visibility": "inherit"
		}]
	},
	{
		"featureType": "water",
		"stylers": [
		{
			"color": "#FFF"
		}]
	}],
	{
		name: 'DELTAONE'
	});

How make this part of javascript to html with .data include jquery?

Like
<div data-json="json goes here?"> So how can combine the only json part be comes from html side data?

Thanks!

Because at html side easy can edit json file (color etc) in a text editor and no need to open remote files. I saw this method in a theme but can get that how work there sadly. P:)

With simple values is works on other elements but this include a function name inside json data that cant get how pass…

From theme:
* **data-map-style="JSON"** - Apply any style from[Snazzy Maps](http://snazzymaps.com/) or [make your own](https://mapstyle.withgoogle.com/).

Thanks!

Sorry but that way what write at json var inside google maps js?

var json = new google.maps.StyledMapType([
how get here object?

Thanks!

Why not so something like the following?

const mapStyles = [
	{
		"featureType": "administrative.country",
		"elementType": "geometry.stroke",
		"stylers": [
		{
			"color": "#FFF"
		}]
	},
	{
		"elementType": "labels.text.fill",
		"stylers": [
		{
			"color": "#FFF"
		},
		{
			"visibility": "inherit"
		}]
	},
	{
		"featureType": "water",
		"stylers": [
		{
			"color": "#FFF"
		}]
	}],
	{
		name: 'DELTAONE'
	});
];

var json = new google.maps.StyledMapType(mapStyles);
1 Like

Uncaught SyntaxError: Invalid destructuring assignment target

At line: name: ‘DELTAONE’

Thanks!

You are true but now not have idea how setup custom style name.