There is a frame with a google map:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=myapikey&q=чортегде" allowfullscreen> </iframe>

And there is a tool for customizing the appearance of the maps: https://mapstyle.withgoogle.com/ in which I received, say, JSON settings like:

 [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#6793d3" } ] } ]

Where to put them? A lot of where it says that you can pass JSON parameters to this GoogleAPI . Dug up at Google - there, again, only json himself found in the examples, but how to convey it in the embed-frame is not.

help

1 answer 1

According to this Google Maps article , you import your json into a Google map with this code:

 <!DOCTYPE html> <html> <head> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: new google.maps.LatLng(2.8,-187.3), mapTypeId: 'terrain' }); // Create a <script> tag and set the USGS URL as the source. var script = document.createElement('script'); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; document.getElementsByTagName('head')[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. window.eqfeed_callback = function(results) { for (var i = 0; i < results.features.length; i++) { var coords = results.features[i].geometry.coordinates; var latLng = new google.maps.LatLng(coords[1],coords[0]); var marker = new google.maps.Marker({ position: latLng, map: map }); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>

And then, already created a Google map, you install into your iframe, but not json, which is imported into the map.