向谷歌地图添加另一个标记会破坏地图

时间:2014-05-06 11:14:11

标签: javascript google-maps google-maps-api-3

我有一张坐地图的地图,然后显示附近的所有健身,学校,杂货店和火车站。

问题在于我想添加另一个标记,它位于我正在关注的合作之上。

我尝试使用下面的代码添加一个,但每当我这样做时,都不会加载地图。

  var marker_home = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: home_icon
  });

我的代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
    <script>
    var map;
    var infowindow;

    function initialize() {
      var home = new google.maps.LatLng(52.0930779, 5.0142526);

      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: home,
        zoom: 15
      });

      var request = {
        location: home,
        radius: 800,
        types: ['gym', 'grocery_or_supermarket', 'train_station', 'school']
      };

      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker(results[i]);
        }
      }
    }

    var home_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var grocery_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var school_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var gym_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var treinstation_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';

    function createMarker(place) {
      var custom_icon;

      if(place.types.indexOf('grocery_or_supermarket') != -1) {
        custom_icon = grocery_icon;
      } else if(place.types.indexOf('gym') != -1) {
        custom_icon = gym_icon;
      } else if(place.types.indexOf('train_station') != -1) {
        custom_icon = treinstation_icon;
      } else if(place.types.indexOf('school') != -1) {
        custom_icon = school_icon;
      }

      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        title: place.name,
        icon: custom_icon
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
      });
    }

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

如果您在地图加载“时尝试在主页坐标上创建标记”,只需将其添加到initialize函数中:

var marker_home = new google.maps.Marker({
    map: map,
    position: home,
    icon: home_icon
});