0

Google Maps API を含む Web ページを作成しようとしています。4 つのマーカーをクリックすると、それぞれ独自の情報を持つ Infobox を開くことができます。これは完全に正常に機能しますが、地図の下に Google Maps API にリンクしたい画像もあり、各リンクが表すマーカーを開きますが、頭を包むことができないようです。他のそのような質問を見て、その回答を試してみましたが、自分のコードに実装する方法がわかりません。

これが私がこれまでに持っているコードです:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(53.487509,-2.240009),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);

    var infoWindow = new google.maps.InfoWindow;

    var myLocations = [
        ["Manchester Town Hall", "This magnificent building was designed in Victorian Gothic style by Alfred Waterhouse and opened in 1877. Amongst its many treasures are the Ford Maddox Brown murals which are monument to the ideas of Victorian Manchester, portraying science, invention, education, trade and textile industry.", "townhall.jpg", "http://www.manchester.gov.uk/", 53.479366, -2.244671],
        ["Manchester Royal Exchange Theatre", "Situated in the heart of Manchester, the Royal Exchange is an award-winning producing Theatre with a history spanning five decades. Known for producing classics such as William Shakespeare, we're also one of the country's leading theatres for new writing, with over 125 premieres in the theatre history!", "royalexchange.jpg", "http://www.royalexchange.co.uk/",  53.482696, -2.244588],
        ["Afflecks's Palace", "Afflecks is an emporium of eclecticism in Manchester’s Northern Quarter. A fantastic place to shop for anything unique, handmade or quirky! With over 73 units filled with individual sellers, you'll be sure to find something you love, or something for someone else!", "afflecks.jpg", "http://www.afflecks.com/", 53.482677, -2.23634],
        ["The Printworks", "The Printworks is a buzzing, state of the art entertainment complex located in the heart of Manchester City Centre. It is home to a range of restaurants, bars and clubs alongside a cinema and gym. The Printworks has something to offer both day and night.", "printworks.jpg", "http://www.theprintworks.com/", 53.485061, -2.241509]
        ];


    function infoCallback(infowindow, marker) { 
        return function() {
        infowindow.open(map, marker);
    };
   }    

   function setMarkers(map, myLocations) {  
    for (var i in myLocations)     {                                        
        var name    = myLocations[i][0];
        var info    = myLocations[i][1];
        var image   = myLocations[i][2];
        var url     = myLocations[i][3];
        var lat     = myLocations[i][4];
        var lng     = myLocations[i][5];
        var latlngset;
        latlngset = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({  
          map: map,  title: name,  position: latlngset  
        });


        var content = 
        '<div class="mapContent"><h3>' + name + '</h3>' + '<img width="192" height="128" src="images/' + image + '"> <div class="mapContentText">' + info + '</div> <h4><a href="' + url + '" target="_blank">' + url + '</a></h4> </div>';

        var infowindow = new google.maps.InfoWindow();
          infowindow.setContent(content);
          google.maps.event.addListener(
            marker, 
            'click',
            infoCallback(infowindow, marker)
          );
      }
    }           
    setMarkers(map, myLocations);
  };

そして、マップとその下に表示される画像を含む HTML のスニペットは、それぞれのマップ マーカーに個別にリンクしたいと考えています。

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5Iwz01YK3kUnBKFSB7W0PML2XcIChJCc&sensor=false"></script>
    <script src="js/mapScript.js"></script>       
</head>

<body onload="initialize()">

    <section id="mapContainer">
    </section>

    <img src="images/tag_townhall.jpg">
    <img src="images/tag_royalexchange.jpg">
    <img src="images/tag_printworks.jpg">
    <img src="images/tag_afflecks.jpg">
</body>

ありがとう！

4

1 に答える 1