1

私は、linqソースから自分の場所を正しくプロットするGoogleマップを持っています。マーカーをクリックして、情報ウィンドウ内のコンテンツを表示することもできます。

すべての場所がマークされた地図の下に、マークされた場所データのリストが表示されます。そのデータから、対応するマーカーのマップ上の情報ウィンドウを開くリンクを作成したいと考えています。ページをロードしたときにすべてのマーカーを表示することしかできませんでしたが、個々のマーカーについては表示できませんでした。

    var currentlyOpenedInfoWindow = null;


function init_map(map_canvas_id, lat, lng, zoom, markers, infoWindowContents) {
    var myLatLng = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: zoom,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map_canvas = document.getElementById(map_canvas_id);

    var map = new google.maps.Map(map_canvas, options);

    if (markers && markers.length > 0) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker(markers[i]); 

            marker.setMap(map);


            bounds.extend(marker.getPosition());

            if (infoWindowContents && infoWindowContents.length > i)
                createInfoWindow(map, marker, infoWindowContents[i]);


        }

        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());


    }   
}

function createInfoWindow(map, marker, infoWindowProperties) {
    var info = new google.maps.InfoWindow(infoWindowProperties);

    google.maps.event.addListener(marker, 'click', function() {
        if (currentlyOpenedInfoWindow != null)
            currentlyOpenedInfoWindow.close();

        info.open(map, marker);
        currentlyOpenedInfoWindow = info;

    });

}

データはコード ビハインド ページから呼び出され、次のようにプロットされます。

// Loop through each nearby location and build up the JavaScript to place the markers
            var locations = new List<string>();
            var infoWindowContents = new List<string>();

            DataView nearbyLocations = schoolData_Record.DefaultView;
            var count = 1;

            foreach (DataRowView location in nearbyLocations)
            {
                locations.Add(string.Format(
                                @"{{ 
                                                title: ""{0}"", 
                                                position: new google.maps.LatLng({1}, {2}),
                                                icon: ""../../Frontend/Images/v2/GoogleMaps/NumberToImageHandlerCS.ashx?number={3}""
                                            }}",
                                   location["Name"],
                                   location["Latitude"],
                                   location["Longitude"],
                                   count
                                )
                              );


                infoWindowContents.Add(string.Format(
                                @"{{ 
                                                content: ""<div class=\""infoWindow\""><b>Store #{0}</b><br />{1}<br />{2}, {3} {4}</div>""
                                            }}",
                                   location["Name"],
                                   location["StreetAddress"],
                                   location["city"],
                                   location["State"],
                                   location["Zipcode"]
                                )
                           );

                count++;


            }

            var locationsJson = "[" + string.Join(",", locations.ToArray()) + "]";
            var overlayContentsJson = "[" + string.Join(",", infoWindowContents.ToArray()) + "]";



            // Inject the Google Maps script
            ClientScript.RegisterStartupScript(this.GetType(), "Google Maps Initialization",
                                               string.Format("init_map('map_canvas', {0}, {1}, 13, {2}, {3});", lat, lng, locationsJson, overlayContentsJson), true);
        }
4

1 に答える 1

2

私は同じ問題を抱えていました-エンクロージャーにマーカーを作成する必要があります-これは私のプロジェクトで使用したコードで、これから一緒にハックできるはずです。

var markers = new Array();
var markerLatLongs = new Array();
var markerBounds = new google.maps.LatLngBounds( );
var infoWindows = new Array();

function initialize() {
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    bPolygon.setMap(map);
    map.fitBounds( bLatLongBounds );

    createMarkers();
    createInfoWindows();
}

function createMarkers() {
    for (var j = 0; j < sites.length; j++)
    {
        var osRef = new OSRef(sites[j].easting, sites[j].northing);
        var latLong = osRef.toLatLng();
        markerLatLongs[j] = new google.maps.LatLng(latLong.lat.toFixed(6),latLong.lng.toFixed(6))
        markerBounds.extend(markerLatLongs[j]);
        markers[j] = new google.maps.Marker({
            position: markerLatLongs[j],
            map: null,
            title: sites[j].siteName
        });    

    }

}



function createInfoWindows() {
    for (var i = 0; i < sites.length; i++) {
        (function(i){
           infoWindows[i] = new google.maps.InfoWindow({maxWidth:200, content: '<div class="info-window-content"><strong>'+sites[i].siteName+'</strong><p>'+sites[i].summary+'</p><a class="green-link" href="http://'+sites[i].url+'" target="_blank">Read more...</a></div>'});
           google.maps.event.addListener(markers[i], 'click', function(e) {
              infoWindows[i].open(map, this);
           });
        })(i);
    }
}
于 2013-01-07T20:11:29.713 に答える