0

これを解決するために多くのことを試しましたが、解決策が見つからないようです。問題は、最初の場所のみがマップに追加され、他の場所が除外されることです。カスタム ピン アイコンを削除すると、すべての場所が正しく追加されます。これに影響すると思われる行は次のとおりです。

icon: iconType[place.icon]

私が言ったように、この行を削除すると、すべてが期待どおりに機能します。私は何を間違っていますか？

以下のコード

次のように、オブジェクトにいくつかの場所が定義されています。

var data = [
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  ...
];

アイコンは次のように定義されます。

iconType = {
  'oneStar' : 'mapimages/lodging_1star.png',
  'twoStar' : 'mapimages/lodging_2star.png',
  ...
};

次のようにデータ変数をループして、for ループを使用して地図上に自分の場所を配置します。

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.desc);
      infowindow.open(map, marker);
    });
}
4

1 に答える 1

1

これは私にとってはうまくいきます（私はあなたのアイコンを持っていないので、Googleのサーバー上の公開アイコンにリンクしました）：

    <script>
       var map;

var data = [
  {
    "name" : "Venue A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.6,19.0),
    "icon" : "oneStar",
    "desc" : "one star",
  },
  {
    "name" : "Hotel B",
    "latlng" : new google.maps.LatLng(-33.4,19.0),
    "icon" : "twoStar",
    "desc" : "two star",
  }
];

iconType = {
  'oneStar' : 'http://maps.google.com/mapfiles/ms/icons/blue.png',
  'twoStar' : 'http://maps.google.com/mapfiles/ms/icons/red.png',
  'venue'   : 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
};

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    var marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent('<b>'+place.name+'</b><br>'+place.desc);
      infowindow.open(map, marker);
    });
}

      google.maps.event.addDomListener(window, 'load', initialize);
     </script>
于 2013-02-13T22:52:57.430 に答える