Javascript 彩色谷歌地图

我正在修改一个在联系我们页面中使用谷歌地图的网站。当前地图的主要颜色是蓝色，我需要把它改成红色。我通过应用背景色属性尝试了CSS规则，但它不会影响地图。我在谷歌上搜索，发现JSON对象用于给地图上色。我从一个网站上创建了一个颜色组合，下面给出了JSON

[{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"weight":"1.06"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#baed7c"},{"visibility":"on"}]}]

这是我在网站上找到的获取地图的javascript代码，实际上，这个方法用于在同一张地图中指向两个位置

var contact = {"lat":"latitude-1", "lon":"longitude-1"}; //Change a map coordinate here!
    var contact2 = {"lat":"latitude-2", "lon":"longitude-2"};


    try {

        var mapContainer = $('.map');
        mapContainer.gmap3({
            infowindow:{
                address:"http://goo.gl/maps/Mt7xc",
                options:{
                    content: "content to display on first location"
                },
                events:{
                    closeclick: function(infowindow){
                        alert("closing : " + infowindow.getContent());
                    }
                }
            },

            action: 'addMarker',
            marker:{
                options:{
                    icon : new google.maps.MarkerImage('images/marker.png')
                }
            },
            latLng: [contact.lat, contact.lon],
            map:{
                center: [contact.lat, contact.lon],
                zoom: 5,
                center:contact
                },
            },
            {action: 'setOptions', args:[{scrollwheel:false}]}
        );

        mapContainer.gmap3({
            infowindow:{
                address:"http://goo.gl/maps/Mt7xc",
                options:{
                    content: "content to display on second location"
                },
                events:{
                    closeclick: function(infowindow){
                        alert("closing : " + infowindow.getContent());
                    }
                }
            },
            action: 'addMarker',
            marker:{
                options:{
                    icon : new google.maps.MarkerImage('images/marker.png')
                }
            },
            latLng: [contact2.lat, contact2.lon],
            map:{
                zoom: 5,
                },
            },
            {action: 'setOptions', args:[{scrollwheel:false}]}
        );

    } catch(err) {
    console.log(err);
    }

---

现在我需要加入json变量和映射代码，这可能吗？或者我需要使用谷歌地图API创建新地图吗？非常感谢任何帮助

我也会发表评论，但我仍在建立我的代表

你考虑过不同的方法吗？使用CSS，您可以简单地在地图iframe上使用色调旋转和饱和过滤器来设计主颜色，以匹配/对比/补充嵌入的网页，我已经制作了一个快速代码笔示例，说明我将如何进行：

iframe {
  filter:hue-rotate(160deg) saturate(3) brightness(0.9);
  -webkit-filter:hue-rotate(160deg) saturate(3) brightness(0.9);
}

---

我希望这有帮助！祝你好运。

你想看一看吗？还是这个类似的？@d_z90你上面提到的问题不是重复的，两个问题都是不同的scenario@d_z90但是你给出的例子听起来不错，让他们试试。请提供一个能说明问题的例子，发布的代码对我来说似乎不起作用。我尝试过使用色调旋转，但它只有有限的颜色。事实上，我需要红色的see区域