带有SSL的Google Maps API自定义图标

问题描述:

我有一个Google地图应用程序,我想放置自定义图标,而不是通常显示的通用红色图标。但不管我做什么,我都不能设置一个不同的图标,它总是显示为红色。我读过你无法在图标的url中使用https,因此我将其上传到图像主机,但仍无法更改图标。我如何在地图上获得自定义图标,还是必须与bing一起去?带有SSL的Google Maps API自定义图标

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    } 

    function codeAddress() { 
    initialize(); 
    var address = document.getElementById("address").value; 
    range = document.getElementById("distance").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_red.png" 
      position: results[0].geometry.location 

     }); 

     lat1 = results[0].geometry.location.lat(); 
     lng1 = results[0].geometry.location.lng(); 

     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    load(); 
    } 

通知,它说:

icon: "http://labs.google.com/ridefinder/images/mm_20_red.png" 

不是不管我改变过它总是显示红色的通用图标。

+0

显示你尝试... – Musa 2013-03-10 23:20:52

+0

查看{自定义标记的文档(https://developers.google.com/maps/documentation/javascript/overlays#SimpleIcons),告诉我们你的代码是什么样子(应该管用)。 – geocodezip 2013-03-10 23:26:53

您可以在页面上的HTTPHTTPS上加载标记图像。但是,您需要确保该方案与包含页面的方案相匹配(或者至少确保在页面也使用HTTPS)。

看起来您的MarkerOptions对象中有错字:图标字符串后缺少逗号。

var marker = new google.maps.Marker({ 
     map: map, 
     icon: "http://labs.google.com/ridefinder/images/mm_20_red.png", 
     position: results[0].geometry.location 

    });