Google maps V3 InfoWindow is not showing

Question

I have to show InfoWindon in two cases:

• Clicking on marker
• Hovering search results.

Also, no script error are shown, but the info windows are not showing. Here is my code:

var searchResults = {"100065":{"Rank":100065,"ID":100065,"Country":"France","Department":null,"CityName":"Paris","ZipCode":"75019","PropertyType":"Apartment","Title":"Super sweet villa100065","Address":"","Price":45000.0000,"Longitude":2.386708,"Latitude":48.890614,"HideAddress":false,"Zone":null,"IsAgency":true,"Image":null,"ImageContentType":""}};


var map = null;
var imgBluePin = '<%= ResolveUrl("~/images/pin_blue.png") %>';
var imgGreenPin = '<%= ResolveUrl("~/images/pin_green.png") %>';
var bounds = new google.maps.LatLngBounds();
var markers = [];

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(47.5200, 2.1959),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('divMap'), myOptions);
}

$(document).ready(function () {
    ResetMap();
});

function ResetMap() {
    initialize();
    showListingsOnMap();
}

function showListingsOnMap() {
    for (var index in searchResults) {
        showAddressesOnMap(
                            searchResults[index].ID,
                            searchResults[index].Title,
                            searchResults[index].Image,
                            searchResults[index].ImageContentType,
                            searchResults[index].Latitude,
                            searchResults[index].Longitude,
                            searchResults[index].Address,
                            searchResults[index].CityName,
                            searchResults[index].Zone,
                            searchResults[index].ZipCode,
                            searchResults[index].Country,
                            searchResults[index].IsAgency,
                            searchResults.length);
    }
}

function GetLocationString(address, city, zone, zip, country) {
    var locationString = address;

    if (city != undefined && city.length > 0) {
        locationString += ", " + city;
    }
    if (zone != undefined && zone.length > 0) {
        locationString += ", " + zone;
    }
    if (zip != undefined && zip.length > 0) {
        locationString += ", " + zip;
    }
    if (country != undefined && country.length > 0) {
        locationString += ", " + country;
    }
    if (locationString.indexOf(",") == 0)
        locationString = locationString.substr(2);

    return locationString;
}

function GetContent(title, image, imageType, address) {
    var content = '<div class="infoPopup">';

    if (image != null) {
        content += '<img src="data:' + imageType + ';base64,' + image + '" class="thumb"></img>';
    }
    content += '<p><span class="title">' + title + "</span></p>";
    content += '<p>' + address + "</p>";
    content += '</div>';
}

function showAddressesOnMap(appID, title, image, imageType, lat, lng, address, city, zone, zip, country, markerType) {

    if (lat != null && lng != null && lat != "0" && lng != "0") {

        var locationString = GetLocationString(address, city, zone, zip, country);

        displayMarker(appID, title, image, imageType, locationString, markerType, lat, lng);
    }
}

function displayMarker(appID, title, image, imageType, address, markerType, lat, lng) {
    var listingLatLng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: listingLatLng,
        map: map,
        icon: markerType ? imgBluePin : imgGreenPin,
        title: title + address
    });

    var content = GetContent(title, image, imageType, address);

    AddInfoWindow(marker, map, content);

    bounds.extend(listingLatLng);
    map.fitBounds(bounds);

    markers.push(marker);
}

function AddInfoWindow(marker, map, content) {
    var infowindow = new google.maps.InfoWindow({
        content: content,
        size: new google.maps.Size(50, 50)
    });

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

    marker.info = infowindow;
}

    //Called on hover of result item from seach
function showInfoWindow(point) {
    if (map) {
        var marker = markers[point - 1];
        map.setCenter(marker.position);
        marker.info.open(map, marker);
    }
}

I checked those solutions - one, two and some others, but neither of them worked.

Answer 1

I got it to display the marker after I commented out the line icon: markerType ? imgBluePin : imgGreenPin, in the displayMarker function since I don't have your icon images.

And I got it to show the infoBox after I added return content; in the GetContent function.

Here is the jsfiddle: http://jsfiddle.net/ninty9notout/AcuSv/

Hope this helps.