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

Question

Hi Everybody! 大家好！

I am trying to create a Custom Styled Google map using API v3. 我正在尝试使用API v3创建自定义样式的Google地图。 The map will eventually go on the following Wordpress page (310px x 537px blank space on right side of page): http://www.flatschicago.com/edgewater-chicago-apartments/ 该地图最终将进入以下Wordpress页面（页面右侧为310px x 537px的空白区域）： http ://www.flatschicago.com/edgewater-chicago-apartments/

I have copied the JavaScript/HTML code from the Google Maps Javascript API v3—Simple styled maps page, and have change the color scheme to fit my websites overall theme. 我已经从Google Maps Javascript API v3（简单样式的地图页面）复制了JavaScript / HTML代码，并更改了配色方案以适合我的网站的整体主题。 I have managed to format the code with the colors that I want, and I have managed to format the size of the map so it fits the space designated on my web page. 我设法用所需的颜色来格式化代码，并且设法对地图的大小进行格式化，以使其适合我的网页上指定的空间。

Here are the 3 things that I am having issues with: 这是我遇到的三件事：

I want to add 5+ custom plot markers to the map. 我想向地图添加5个以上的自定义绘图标记。 Where do I add this code? 我在哪里添加此代码？
I want the street labels to appear on the map. 我希望街道标签出现在地图上。 Where do I add this code? 我在哪里添加此代码？
I tried adding the code in to my Wordpress page, but I did not work. 我尝试将代码添加到我的Wordpress页面中，但是没有用。 Is there a certain part of the JavaScript/HTML code that I should only be adding? 我应该只添加JavaScript / HTML代码的某些部分吗？

Here is the code that I have so far. 这是我到目前为止的代码。

    <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) Adding 5+ Custom Plot Markers The code I am referring to is from the following page: page link . 1）添加5个以上的自定义绘图标记我要引用的代码来自以下页面：页面链接。 I understand that I need to add a marker image and long/lat for each location, but when I try and copy and paste this code into the code that I already have created, the map doesn't work. 我了解我需要为每个位置添加标记图像和长/纬度，但是当我尝试将此代码复制并粘贴到我已经创建的代码中时，地图将无法正常工作。 Where am I supposed to be copying and pasting this code? 我应该在哪里复制和粘贴此代码？ Do it go inside the function initialize() code? 它是否在函数initialize（）代码内？ Or is it its own function? 还是它自己的功能？ Very confused. 很迷茫。

2) Adding Street Labels The code I am referring to is from the Google Maps Javascript API v3—Styled Maps page. 2）添加街道标签我所指的代码来自Google Maps Javascript API v3-样式地图页面。 All I want to do is to be able to see the street labels on the map. 我要做的就是能够在地图上看到街道标签。 The code I am referring to is this. 我指的是这个代码。 I tried putting this in to my code, but again, it didn't work. 我尝试将其放入我的代码中，但是再次失败了。 Is there a simply label like 'roads,' 'on' that gets these labels to work? 是否有像“道路”，“上”这样的简单标签使这些标签起作用？

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) Add code to Wordpress page The map will eventually go on the /edgewater-chicago-apartments/ pahe. 3）将代码添加到Wordpress页面该地图最终将显示在/ edgewater-chicago-apartments / pahe上。 The space that I left for the map is labeled <td class="neighborhood-map" rowspan="5"></td> : 我留给地图的空间标记为<td class="neighborhood-map" rowspan="5"></td> ：

If someone could please help me with this, I will be forever grateful. 如果有人可以帮助我，我将永远感激不已。 I feel like I am so close, yet these three things are holding me up and it is very frustrating. 我感觉自己是如此接近，但是这三件事阻碍了我，这非常令人沮丧。 Anyone? 任何人？

Answer 1

You need to have actual data (JSON format) to add the markers. 您需要具有实际数据（JSON格式）才能添加标记。 For example: 例如：

    // 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);
    });
}

This code loops an array (yourJsonData) that has values for latitude, longitude, etc. 该代码循环一个数组（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