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

Question

大家好！

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

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

这是我遇到的三件事：

我想向地图添加5个以上的自定义绘图标记。 我在哪里添加此代码？
我希望街道标签出现在地图上。 我在哪里添加此代码？
我尝试将代码添加到我的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个以上的自定义绘图标记我要引用的代码来自以下页面：页面链接。 我了解我需要为每个位置添加标记图像和长/纬度，但是当我尝试将此代码复制并粘贴到我已经创建的代码中时，地图将无法正常工作。 我应该在哪里复制和粘贴此代码？ 它是否在函数initialize（）代码内？ 还是它自己的功能？ 很迷茫。

2）添加街道标签我所指的代码来自Google Maps Javascript API v3-样式地图页面。 我要做的就是能够在地图上看到街道标签。 我指的是这个代码。 我尝试将其放入我的代码中，但是再次失败了。 是否有像“道路”，“上”这样的简单标签使这些标签起作用？

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> ：

如果有人可以帮助我，我将永远感激不已。 我感觉自己是如此接近，但是这三件事阻碍了我，这非常令人沮丧。 任何人？

Answer 1

您需要具有实际数据（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），该数组具有纬度，经度等值。

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

问题描述

1 个解决方案

解决方案1
1 2013-10-16 19:19:16

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

问题描述

1 个解决方案

解决方案1 1 2013-10-16 19:19:16

解决方案1
1 2013-10-16 19:19:16