将自定义标记添加到自定义样式的 Google Maps API v3 for Wordpress 网站

Adding Custom Markers to Custom Styled Google Maps API v3 for Wordpress website

本文关键字：自定义 API Maps v3 Wordpress 网站 Google for 添加 样式      更新时间：2023-09-26

大家好！

我正在尝试使用 API v3 创建自定义样式的谷歌地图。地图最终将出现在以下Wordpress页面上（页面右侧的空白区域为310px x 537px）：http://www.flatschicago.com/edgewater-chicago-apartments/

我从Google Maps Javascript API v3 - 简单样式的地图页面复制了JavaScript/HTML代码，并更改了配色方案以适应我的网站整体主题。我已经设法用我想要的颜色格式化代码，并且我设法格式化了地图的大小，使其适合我的网页上指定的空间。

以下是我遇到问题的 3 件事：

  1. 我想在地图上添加 5+ 个自定义绘图标记。在哪里添加此代码？
  2. 我希望街道标注显示在地图上。在哪里添加此代码？
  3. 我尝试将代码添加到我的Wordpress页面，但我没有工作。JavaScript/HTML 代码的某个部分是否应该只添加？

这是我到目前为止的代码。

    <html>
    <head>
    <title>Simple styled maps</title>
    <style>
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var edgewater = new google.maps.LatLng(41.987245, -87.661233);
    var MY_MAPTYPE_ID = 'custom_style';
    function initialize() {
    var featureOpts = [
    {
      stylers: [
        { hue: '#3b3d38' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
    featureType: 'poi.business',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#3b3d38' }
      ]
    }
    ];
      var mapOptions = {
    zoom: 12,
    center: edgewater,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    var styledMapOptions = {
    name: 'Custom Style'
    };
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body onload='intialize()'>
    <div id="map-canvas" style='width:310px; height:537px;'></div>
   </body>
   </html>

1）添加5+自定义绘图标记我所指的代码来自以下页面：页面链接。我知道我需要为每个位置添加一个标记图像和 long/lat，但是当我尝试将此代码复制并粘贴到我已经创建的代码中时，地图不起作用。我应该在哪里复制和粘贴此代码？它是否进入函数初始化（）代码内部？还是它自己的功能？很困惑。

2） 添加街道标签我所指的代码来自Google Maps Javascript API v3 - Styled Maps页面。我想做的只是能够在地图上看到街道标签。我所指的代码是这样的。我尝试将其放入我的代码中，但同样，它不起作用。有没有像"道路"、"开"这样的简单标签可以让这些标签发挥作用？

var styleArray = [
{
featureType: "all",
stylers: [
  { saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
  { hue: "#00ffee" },
  { saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
  { visibility: "off" }
]
}
];

3）将代码添加到WordPress页面地图最终将出现在/edgewater-chicago-apartments/pahe上。我留给地图的空间被标记 <td class="neighborhood-map" rowspan="5"></td> ：

如果有人能帮我解决这个问题，我将永远感激不尽。我觉得我是如此接近，但这三个东西支撑着我，这非常令人沮丧。任何人？

您需要有实际数据（JSON 格式）才能添加标记。 例如：

    // yourJsonData = data in valid JSON format
for ( i = 0; i < yourJsonData.length; i++ ) {
    var latlng = new google.maps.LatLng(yourJsonData[ i ].lat, yourJsonData[ i ].long);
    var marker = new google.maps.Marker({
        map: map,
        icon: yourURL + '/path-to-custom-markers/' + yourJsonData[ i ].icon,
        position: latlng,
        title: yourJsonData[ i ].title,
        html: '<div class="info-window">Your window text</div>'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.html);
        infowindow.setOptions({maxWidth: 800});
        infowindow.open(map, this);
    });
}

此代码循环一个数组 （yourJsonData），该数组具有纬度、经度等值。

相关文章：