如何添加Google制造商的地图名称和说明

时间:2017-05-03 08:30:43

标签: javascript wordpress google-maps

我有问题。这是谷歌地图JavaScript代码。我想添加标记名称和描述,它将显示鼠标悬停效果。 Thanksa

 <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });
        var icons = {
          parking: {
            icon: 'icon32.png'
          }
        };
        var features = [
          {
            position: new google.maps.LatLng(-33.91721, 151.22630),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91539, 151.22820),
            type: 'parking'
          }
        ];
        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }
    </script>

1 个答案:

答案 0 :(得分:0)

您应该使用此修改后的代码来实现目标:

<script>
    var infowindows = [];
    var map;
    var Markers = [
        ['Palace of Westminster', 'London', '51.499332, -0.124659'],
        ['Tower Bridge', 'London', '51.505396, -0.075432'], 
    ];
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: new google.maps.LatLng(51.485570, -0.129103),
            mapTypeId: 'roadmap'
        });
        var icons = {
            parking: {
                icon: 'icon32.png'
            }
        };

        // Create markers.
        for (var i=0; i<Markers.length; i++) {
            var contentString = '<div class="infoWindow"><strong>' + Markers[i][0] + '<\/strong>' +
                '<br>' + Markers[i][1] + '<\/div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            latLngString = Markers[i][2];
            latLngString = latLngString.replace("(","");
            latLngString = latLngString.replace(")","");
            latLngString = latLngString.trim();         

            var lat = latLngString.split(",")[0].trim();
            var lng = latLngString.split(",")[1].trim();
            var latLng = new google.maps.LatLng(lat, lng);

            var marker = new google.maps.Marker({
                map: map,
                position: latLng,
                icon: icons[parking].icon,              
            });
            google.maps.event.addListener(marker, 'mouseover', function() {
                infowindow.open(map, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close(map, marker);
            });
            infowindows.push(infowindow);
        }
    }
</script>

阵列标记包含有关要放置在地图上的每个标记的名称,位置和坐标的信息。编辑它以将您自己的标记放在地图上。