将Google Maps标记图标更改为自定义图标

Question

我一直在使用Adobe muse开发网站，我选择在公司联系页面上实施自定义Google Map。我已经使用了一些基本的JavaScript，通过在里面插入'HTML Element'来插入到Muse文件中，我有我的JS。

我还应该提到，我通过页面的元数据（通过页面>页面属性>缪斯内的元数据访问）链接到页面'头部'的Google Maps API（以及我的相关密钥）。

遵循Google提供的指南，我创建了一个自定义地图，然后应用一些额外的样式，使用通过[https://snazzymaps.com]生成的JS。

我的问题出现在试图替换默认的标记图标，用我自己的标记在Illustrator中创建（本地存储在我的i​​Mac中），我跟随了不同指南的负载，尝试了多种方式实现自定义图标，但没有任何运气 - 有人可以告诉我我要去哪里错了吗？这将非常感激。

这里是我JS的外观缪斯HTML元素>

<script> 
function initMap() { 
var myLatLng = {lat: 51.454137, lng: -2.473673}; 

var map = new google.maps.Map(document.getElementById('u64615'),{ 
    zoom: 16, 
    center: myLatLng, 
    styles: 
    [ 
{ 
    "featureType": "administrative", 
    "elementType": "labels.text.fill", 
    "stylers": [ 
     { 
      "color": "#444444" 
     } 
    ] 
}, 
{ 
    "featureType": "landscape", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "color": "#f2f2f2" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "geometry.fill", 
    "stylers": [ 
     { 
      "color": "#f10019" 
     }, 
     { 
      "visibility": "simplified" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "labels", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "labels.text", 
    "stylers": [ 
     { 
      "visibility": "simplified" 
     }, 
     { 
      "color": "#f10019" 
     } 
    ] 
}, 
{ 
    "featureType": "poi", 
    "elementType": "labels.icon", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.attraction", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "geometry", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "geometry.fill", 
    "stylers": [ 
     { 
      "visibility": "simplified" 
     }, 
     { 
      "color": "#f10019" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "geometry.stroke", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "labels", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "labels.text", 
    "stylers": [ 
     { 
      "visibility": "on" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.business", 
    "elementType": "labels.icon", 
    "stylers": [ 
     { 
      "visibility": "off" 
     }, 
     { 
      "weight": "0.01" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.government", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.medical", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.park", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.place_of_worship", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.school", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "poi.sports_complex", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "road", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "saturation": -100 
     }, 
     { 
      "lightness": 45 
     }, 
     { 
      "visibility": "on" 
     } 
    ] 
}, 
{ 
    "featureType": "road.highway", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "simplified" 
     } 
    ] 
}, 
{ 
    "featureType": "road.arterial", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "on" 
     } 
    ] 
}, 
{ 
    "featureType": "road.arterial", 
    "elementType": "labels.icon", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "transit", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "visibility": "off" 
     } 
    ] 
}, 
{ 
    "featureType": "water", 
    "elementType": "all", 
    "stylers": [ 
     { 
      "color": "#163742" 
     }, 
     { 
      "visibility": "on" 
     } 
    ] 
}] 


}); 

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'Precision Profiles Manufacturing' 
}); 

var contentString = 
    '<div>'+ 
    '<div>'+ 
    '</div>'+ 
    '<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+ 
    '<div id="bodyContent">'+ 
    '<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+ 
    '</div>'+ 
    '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString, 
    maxWidth: 200, 
    maxHeight: 400, 
}); 

marker.addListener('click', function() { 
    infowindow.open(map, marker); 
}); } </script> 

Answer 1

中在“VAR标记”的对象，有一个“图标”参数。根据文档here，您想要制作另一个变量，并在其中存储您的图标，然后将图标设置在您当前拥有的标记对象内。

Answer 2

快速浏览一下Google Maps API会让你看到这个page。

深入了解API，可以看到，当您实例化新的google.maps.Marker时，将会有一个名为icon:的可选属性。这是您可以指定一个字符串路径到您要存储您想要使用的图像的目录。

所以在全，代码实例化一个新的标志物类将是：

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: "https://your_domain.com/your_directory/your_image.jpg", 
    title: 'Precision Profiles Manufacturing' 
}); 

Answer 3

有两种方法来设置一个标记的图标。您可以在标记初始化期间或之后设置图标（使用marker.setIcon (yourUrl)）。

女巫得出：

1. 初始化

   var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
   var beachMarker = new google.maps.Marker({ 
       position: {lat: -33.890, lng: 151.274}, 
       map: map, 
       icon: image 
   }); 
   } 
   

2. 初始化后

   var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
   var beachMarker = new google.maps.Marker({ 
       position: {lat: -33.890, lng: 151.274}, 
       map: map, 
   }); 
   } 
   
   beachMarker.setIcon (image); 
   

Here是完整的DOC和here谷歌地图API参考。