1

クリックすると Fancybox ライトボックスにポップアップする複数のマーカーを含む Google マップを作成しています。認めざるを得ませんが、私は JavaScript と Google Maps API の初心者です。

いくつかの異なるサンプル スクリプトを組み合わせて、実際に適切に機能するものを考え出しました。マーカーは好きなように（まあ、キャプションなしで... まだ理解する必要があります）、好きなようにマップのスタイルを持ち、クリックするとライトボックスをポップアップするマーカーさえ持っています。

ただし、すべてのマーカーがライトボックスで 1 つの URL を開くことになります。それは少し理にかなっていると思います。Fancybox コードは、各マーカーに個別に配布されるのではなく、すべてのマーカーに配布されます。URL を使用して別の引数を作成し、それを Fancybox スクリプトに渡そうとしましたが、最後のマーカーの URL を取得してすべてのマーカーに使用するだけです。一度にすべてのマーカーではなく、各マーカーに対して URL を機能させるにはどうすればよいですか?

ここで同様の質問を見つけました：

複数のファンシーボックスのGoogleマップ

ただし、同じ問題を攻撃する別のルートを使用するようです。さらに、スクリプトを自分のコードに統合するどころか、スクリプトを単独で動作させることもできないようです。そのため、ソリューションがどのように機能するかはわかりますが、役に立たないようです.

私のコードは次のとおりです。

var map;

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      stylers: [
        { hue: '#CCCCCC' },
        { saturation: '-100' },     
        { visibility: 'simplified' },
        { gamma: 2 },
        { weight: .4 }
      ]
    },
    {
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#efefef' }
      ]
    }
  ];

  var mapOptions = {
    zoom: 9,
    scrollwheel: false,
    keyboardShortcuts: false,
    disableDefaultUI: true,
    center: new google.maps.LatLng(34.0531553, -84.3615928),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

 setMarkers(map, schools);
}


var schools = [
  ['Canton', 34.2352063, -84.4846274, 4, 'popup.htm'],
  ['Austell', 33.8158106, -84.6334938999999, 3, 'popup.htm'],
  ['Marietta', 33.9578674, -84.5532791, 2, 'popup.htm'],
  ['Atlanta', 33.7635085, -84.43030209999999, 1, 'popup2.htm']
];

function setMarkers(map, locations) {

  var image = {
    url: 'images/fml-home.png',

    size: new google.maps.Size(67, 63),

    origin: new google.maps.Point(0,0),

    anchor: new google.maps.Point(0, 63)
  };
  var shadow = {
    url: 'images/fml-shadow.png',

    size: new google.maps.Size(45, 18),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 18)
  };

  var shape = {
      coord: [1, 1, 1, 67, 60, 67, 60 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var schools = locations[i];

    var myLatLng = new google.maps.LatLng(schools[1], schools[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: schools[0],
        zIndex: schools[3]

    });

        var href = schools[4];

    google.maps.event.addListener(marker, 'click', function() {

         $.fancybox({
    frameWidth    : 800,
    frameHeight   : 600,
    href : href,
    type : 'iframe'
        });
            });

}

}

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

1 に答える 1