2012-01-23 2 views
2

я должен показать InfoWindon в двух случаях:Google карты V3 InfoWindow не показывает

  • Клик по маркеру
  • наведении результатов поиска.

Также не отображается ошибка сценария, но информационные окна не отображаются. Вот мой код:

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

Я проверил эти решения - one, two и некоторые другие, но ни один из них работал.

ответ

1

Я получил его, чтобы отобразить маркер после того, как я прокомментировал строку icon: markerType ? imgBluePin : imgGreenPin, в функции displayMarker, так как у меня нет ваших изображений значков.

И я получил его, чтобы показать infoBox после того, как я добавил return content; в функцию GetContent.

Вот jsfiddle: http://jsfiddle.net/ninty9notout/AcuSv/

Надеется, что это помогает.

+0

Да, я забыл вернуть содержимое. Это была проблема, и я не мог ее увидеть. Большое спасибо. – Thea

+1

Добро пожаловать. Удачи с вашим проектом. – ninty9notout

Смежные вопросы