2015-08-17 2 views
0

Я пытаюсь заменить значок Google по умолчанию тем, который я использую. Однако маркер по умолчанию все еще отображается на карте. Как новичок в JavaScript, мои навыки все еще изворотливы. Может ли кто-нибудь проверить мой код, чтобы узнать, что пошло не так? Благодарю.Пользовательский маркер не отображается на Картах Google

var hq_icon = "C:\Users\User.CARRIESHIH-PC\Desktop\Map_dev\hq.png"; 

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var HQMarker = new google.maps.Marker({ 
      position: FirsteamHQ, 
      map: map, 
      icon: hq_icon 
      }); 
HQMarker.setMap(map); 
+0

Есть ли какие-нибудь интересные сообщения в консоли JavaScript? [Ваш код (по крайней мере, то, что вы опубликовали) работает для меня (с общедоступной иконкой)] (http://jsfiddle.net/geocodezip/tdv8d7yr/). Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

ответ

-1

Я думаю, что вам не хватает координат (положения). Это должно быть примерно так

position: new google.maps.LatLng(lat, lng) 
+0

Упс. FirsteamHQ является абстрактной формой координат. Спасибо, что указали! – user3600725

+0

Итак, он работает сейчас? – Gacci

+0

К сожалению нет. Значок по-прежнему является значением по умолчанию, которое предоставляет Google. Я считаю, что мой синтаксис для пользовательского значка правильный, но я не мог понять, что не так. – user3600725

1

Вы не можете загрузить локальный файл с абсолютного пути. Подавайте файл через HTTP (S) или используйте относительный путь.

[править]

Полный пример:

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <style type="text/css"> 
     html{height: 100%} 
     body{height: 100%; margin: 0; padding: 0} 
     #map-canvas{height: 100%} 
    </style> 
    <title>GMaps Demo</title> 
    <script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 
     function initialize(){ 
      var mapOptions = { 
       center: new google.maps.LatLng(-34.397, 150.644), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
      var hq_icon = "http://i.imgur.com/Na6VUFY.png"; 
      var HQMarker = new google.maps.Marker({ 
       position: new google.maps.LatLng(-34.397, 150.644), 
       map: map, 
       icon: hq_icon 
      }); 
      HQMarker.setMap(map); 


     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
</head> 
<body> 
    <div id = "map-canvas"> 
    </div> 
</body> 
</html> 
+0

Привет. Я попробовал то, что вы сказали, назначив *** var hq_icon = "http://i.imgur.com/Na6VUFY.png"; ***. Тем не менее, Google Maps не загружался, когда я это делаю. – user3600725

+0

Тогда что-то еще не так. Я отредактировал свой ответ, чтобы представить полный пример. –

+1

Вы ** можете ** загружать локальный файл (нет необходимости в http: // или https: //), но он должен быть относительным путем. – MrUpsidown

0

Вы должны предоставить свой сценарий с относительным путем к файлу значок:

var hq_icon = "relative/path/to/hq.png"; 

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

var HQMarker = new google.maps.Marker({ 
    position: FirsteamHQ, 
    map: map, 
    icon: hq_icon 
}); 

HQMarker.setMap(map); 

Так что, если, например, ваш вышеприведенный скрипт находится в нижерасположенной структуре в map.js и ваш hq.png изображение находится в images/markers

Project 
| 
|-- map.js 
|  
+-- images 
    | 
    +-- markers 
     | 
     |-- hq.png 

Тогда относительный путь будет images/markers/hq.png

Смежные вопросы