多个标记,单个信息窗口,锚定在地图的底部

时间:2011-11-22 13:53:46

标签: javascript google-maps-api-3 google-maps-markers

我无法渲染以多个标记为基础的Google地图信息窗。

我正在使用MVC 3和javascript来渲染地图,地图渲染得很好,以及相关的信息窗口。但我希望信息窗口显示在地图的底部,而不是相对于标记。根据用于搜索的国家/地区,每张地图的起点可能会有所不同。我的javascript在下面(正在运行)>我只是不知道如何改变信息:

   function initializeMap() {

var countryID = $("#CountryID :selected").val();
var cityID = $("#cities :selected").val();
var regionID = $("#regions :selected").val();
var locationtypeID = $("#LocationTypeID :selected").val();
var filtertype = $("#filtertype").val();
var latlng;

$.ajax({
    type: "GET",
    url: "/ajaxcalls/getCentre",
    data: "cid=" + countryID,
    datatype: "json",
    success: function (result) {
        var gpscoords = (result).split(",");
        latlng = new google.maps.LatLng(gpscoords[0], gpscoords[1]);
    },
    error: function (req, status, error) {            
    }
});

var myOptions = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};    

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

$.ajax({
    type: "GET",
    url: "/ajaxcalls/getmarkers",
    data: "cid=" + countryID + "&rid=" + regionID + "&xid=" + cityID + "&tid=" + locationtypeID + "&filterType=" + filtertype,
    datatype: "json",
    success: function (result) {

        var infowindow = null;

        infowindow = new google.maps.InfoWindow({
            content: "holding..."
        });

        $.each(result, function (i, item) {

            var gpscoords = (item.GPSCoOrds.toString()).split(",");

            var mpos = new google.maps.LatLng(gpscoords[1], gpscoords[0]);

            var markerobject = "";

            if (item.LocationTypeID == 2) {
                markerobject = "atm.png";
            }
            else {
                markerobject = "bank.png";
            }

            marker = new google.maps.Marker({
                map: map,
                position: mpos,
                draggable: false,
                icon: "/content/mapicons/" + markerobject,
                title: item.Designation.toString() + " " + item.Address.toString()
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                var windowcontent = "<div>Site Name: ";
                windowcontent = windowcontent + item.Designation + "</div>";
                windowcontent = windowcontent + "<div>Address: " + item.Address + "</div>";
                windowcontent = windowcontent + "<div>Contact Number: " + item.contactNumber + "</div>";
                windowcontent = windowcontent + "<div>Branch Type: " + item.BranchType + "</div>";
                windowcontent = windowcontent + "<div>Network Provider: " + item.NetworkProvider + "</div>";
                windowcontent = windowcontent + "<div>Network Capacity: " + item.NetworkCapacity + "</div>";

                infowindow.setContent(windowcontent);

                infowindow.open(map, this);
            });
        });
    },
    error: function (req, stats, error) {
        alert(error);
    }
});
    }

   $(document).ready(function () {
        $("#mapupdater").click(function () {
    initializeMap();
});
    });

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

不要使用infowindow.open(map, this);

将infowindow锚定到标记

只需infowindow.open(map);

然而,您仍然必须告诉信息窗口在哪里出现。在创建时使用position属性,或在创建后使用setPosition()