0

スタイルを追加したカスタム Google マップがあります。これはダイナミック マーカーを含むイベント マップです。すべてのダイナミック マーカーと情報をロードするマップが機能しています。私のページでは、マップの下に結果が表示されます。結果のリンクをクリックすると、マップ上の関連する情報ウィンドウが開きます。この記事のRaymond Camdens デモを使用していますが、ページ上のリンクを操作するための最後の部分を取得できません (アドレスをジオコーディングする必要がないため、スクリプトのジオコーディング部分を削除する必要がありました。コーディネート。）

これが私のコードです：

var map;

var lastinfowindow;

function initialize() {


    // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#0b9cc1" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "administrative.country",
      elementType: "labels",
      stylers: [
        { visibility: "on" }
      ]
    },

    { featureType: "water", 
     elementType: "geometry", 
    stylers: [ { visibility: "on" }, { lightness: -10 }] },
    { featureType: "poi", 
    stylers: [ { visibility: "on" } ] }

  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"}); 





    var latlng = new google.maps.LatLng(38, -90);
    var mapOptions = {
        zoom: 3,
        center: latlng,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

    var image = 'sp-mark.png';



   latLng = new google.maps.LatLng ('23.00593', '12.65287');
            var marker1 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 1 - 38',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
            });

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

            marker.gigid = 38;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('57.19173', '-1.7083');
            var marker2 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 2 - 30',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
            });

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

            marker.gigid = 30;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('56.98083', '1.30056');
            var marker3 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 3 - 32',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
            });

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

            marker.gigid = 32;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('58.96', '1.39861');
            var marker4 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 4 - 41',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
            });

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

            marker.gigid = 41;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('-43.92528', '28.42389');
            var marker5 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 5 - 47',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
            });

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

            marker.gigid = 47;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;


    //Associate the styled map with the MapTypeId and set it to display.
     map.mapTypes.set('map_style', styledMap);
     map.setMapTypeId('map_style');

    $(".order").click(function() {
        var thisgig = $(this).data("gigid");
        for(var i=0; i<markers.length; i++) {
            if(markers[i].gigid == thisgig) {
                console.log("found my match");
                //get the latlong
                if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                console.dir(markers[i]);
                map.panTo(markers[i].getPosition());
                markers[i].infowindow.open(map, markers[i]);
                lastinfowindow = markers[i].infowindow;
            }
        }
    });



}

リンク先の本文セクションは次のとおりです。 

<body onload="initialize()">

<div id="map_canvas"></div>

<div id="orders">

    <p class="order" data-gigid="38">
    <b>Order 38</b><br/>
    Event 1
    </p>

    <p class="order" data-gigid="30">
    <b>Order 30</b><br/>
    Event 2
    </p>

    <p class="order" data-gigid="32">
    <b>Order 32</b><br/>
    Event 3
    </p>

    <p class="order" data-gigid="41">
    <b>Order 41</b><br/>
    Event 4
    </p>

    <p class="order" data-gigid="47">
    <b>Order 47</b><br/>
    Event 5
    </p>

</div>

</body>

誰かがこの問題で私を助けてください。

ありがとう

4

1 に答える 1

0

ページに JavaScript エラーがあると、通常、Google マップの読み込みに失敗します。あなたはたくさん持っています。

ここに構文エラーがあります：

var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
            });

次のようにする必要があります。

var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
            });

LatLng は、2 つの文字列ではなく、2 つの浮動小数点数を取ります。

latLng = new google.maps.LatLng ('23.00593', '12.65287');

Javascript は大文字と小文字を区別します。だからあなたが言うとき：

latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
                ...
                position: LatLng
            });

あなたの変数はlatLngと呼ばれていたので、LatLngを認識しません

ここでの問題：

marker.gigid = 38;

マーカーと呼ばれる変数がないことです。あなたはmarker1と呼ばれる変数を持っています:

var marker1 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 1 - 38',
                icon:image
            });

完全を期すために、マーカーの 1 つを実行する方法を次に示します (もっと良い方法がありますが、これでうまくいくはずです)。var marker1 = new google.maps.Marker({ map: map, position: latLng , title: 'Event 1 - 38', icon:image });

        var infowindow = new google.maps.InfoWindow({
          content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
        });

        google.maps.event.addListener(marker1, 'click', function() {
         infowindow.open(map,marker1);
        });

        marker1.gigid = 38;
        marker1.infowindow = infowindow;
        markers[markers.length] = marker1;
于 2012-07-24T16:53:01.250 に答える