Question

I am having trouble rendering a google map infowindow anchored with multiple markers.

I am using MVC 3 and javascript to render the map, the map renders fine, as well as relative info windows. But I want the info window to be displayed at the bottom of the map, rather than relative to the marker. The starting point for each map could be different based on the country used for search. My javascript is below (which is working)> i just don’t know how to change the infowindow:

   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();
});
    });

Any help would be appreciated.

Answer 1

Don’t anchor the infowindow to the marker with infowindow.open(map, this);

Just do infowindow.open(map);

However you’ll still have to tell the infowindow where to appear. Either use the position attribute when creating it, or setPosition() after it’s been created.