2012-01-23 6 views
2

Je dois montrer InfoWindon dans deux cas:Google maps V3 InfoWindow ne montre pas

  • En cliquant sur le marqueur
  • Planant résultats de recherche.

De même, aucune erreur de script n'est affichée, mais les fenêtres d'informations ne s'affichent pas. Voici mon 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); 
    } 
} 

j'ai vérifié ces solutions - one, two et quelques autres, mais aucun d'entre eux travaillaient.

Répondre

1

Je l'ai eu pour afficher le marqueur après avoir commenté la ligne icon: markerType ? imgBluePin : imgGreenPin, dans la fonction displayMarker puisque je n'ai pas vos images d'icône.

Et je l'ai eu pour montrer l'infoBox après avoir ajouté return content; dans la fonction GetContent.

Voici le jsFiddle: http://jsfiddle.net/ninty9notout/AcuSv/

Hope this helps.

+0

oui, j'ai oublié de retourner le contenu. C'était le problème et je ne pouvais pas le voir. Merci beaucoup. – Thea

+1

De rien. Bonne chance pour votre projet. – ninty9notout

Questions connexes