为Google地图创建客户标记

时间:2015-01-08 14:24:59

标签: google-maps google-maps-api-3 google-maps-markers google-api-v3

我正在尝试为我目前在Google地图上设置的图钉创建新标记。我已经按照文档中的示例进行操作,但仍然使用旧的红色引脚。

这是仅针对标记的代码:

var myLatLng = new google.maps.LatLng(51.521616, -0.102589);
var marker = 'marker.png';
var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

这是整个地图脚本。

google.maps.event.addDomListener(window, 'load', init);

function init() {
var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.521616, -0.102589),
    styles: [   {"featureType":"all",       "stylers":[         {"saturation":0},           {"hue":"#e7ecf0"}       ]   },  {"featureType":"road",      "stylers":[         {"saturation":-70}      ]   },  {"featureType":"transit",       "stylers":[         {"visibility":"on"}     ]   },  {"featureType":"poi",       "stylers":[         {"visibility":"off"}        ]   },  {"featureType":"water",     "stylers":[         {"visibility":"simplified"},            {"saturation":-60}      ]   }]
};

var myLatLng = new google.maps.LatLng(51.521616, -0.102589);

var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);

var marker = 'marker.png';

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

我哪里出错了?是否与我添加的其他地图选项有关?

我使用的是Google Maps API v3

1 个答案:

答案 0 :(得分:1)

你的代码中有一个拼写错误(你正在覆盖“标记”,应该是“图像”)。变化:

var marker = 'marker.png';
var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

要:

var image = 'marker.png';
var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

google.maps.event.addDomListener(window, 'load', init);

function init() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.521616, -0.102589),
    styles: [{
      "featureType": "all",
      "stylers": [{
        "saturation": 0
      }, {
        "hue": "#e7ecf0"
      }]
    }, {
      "featureType": "road",
      "stylers": [{
        "saturation": -70
      }]
    }, {
      "featureType": "transit",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "simplified"
      }, {
        "saturation": -60
      }]
    }]
  };

  var myLatLng = new google.maps.LatLng(51.521616, -0.102589);

  var mapElement = document.getElementById('map');
  var map = new google.maps.Map(mapElement, mapOptions);

  var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
  });
}
html,
body,
#map {
  height: 100%;
  width: 100%;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>