Несколько маркеров и открытое / закрытое информационное окно

Я использую Google Maps V3, и я просмотрел многие темы здесь и в Интернете, как использовать несколько маркеров и открывать / закрывать информационное окно. Я мог сделать каждый из них по отдельности, но не когда вместе.

Есть некоторые закомментированные разделы моего кода только из экспериментов и просмотра ссылок в Интернете. Мне было интересно, если кто-то мог видеть, где я не прав, и объяснить немного, почему они сделали то, что сделали. ТАКЖЕ моя maxWidth не устанавливает правильную ширину, и я не уверен почему. Я несколько раз менял размеры, и к информационному окну на карте не применялось никаких изменений.

Спасибо!

файл map.js:

$(document).ready(function() {

function initialize() {
      var defaultCoords = new google.maps.LatLng(42.730173,-73.678810);
      var mapOptions = {
        zoom: 16,
        center: defaultCoords,
        streetViewControl: false,
        zoomControl: false
      }
      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);


    $.getJSON('resources/js/searchtest.json', function (response)
    {
        handleData(response, map);
        //handling errors in search queries
        if (response.errors.length > 0) {
            console.log(response.errors);
            for (var i=0; i<response.errors.length; i++) {
                $('#searchErrors').append("<p>" + response.errors[i] + "</p>");
            }
        }

    });

    }

    google.maps.event.addDomListener(window,'resize',initialize);
    google.maps.event.addDomListener(window, 'load', initialize);

    function handleData(response, map) {
        //alert(response);
        var lat, lon, myLatLng,
            marker, infowindow, contentString;
        var infowindow = null;
        var activeWindow = null;

        $.each( response.posts, function(i, post) { //add marker each time
            contentString = '';
            lat = post.latitude;
            lon = post.longitude;
            myLatLng = new google.maps.LatLng(lat,lon);
            marker = new google.maps.Marker({ //creating new marker
                position: myLatLng,
                map: map
            });

            //what is in info window
            contentString = "<h4>" + post.title + "</h4>"
            + "</br>" + convertTime(post.time);

            infowindow = new google.maps.InfoWindow({
                content: contentString, //putting content in window
                maxWidth: 160
            });

            google.maps.event.addListener(marker, 'click', getInfoCallback(map, activeWindow, contentString));
        });

        //setting the new center after getting the items
        map.setCenter(new google.maps.LatLng(response.centralLat, response.centralLon));


    }

    function convertTime(UNIXtime) {
        // var formattedTime = UNIXtime;
        // return formattedTime;
    }

    function getInfoCallback(map, activeWindow, content) {
        var infowindow = new google.maps.InfoWindow({
            content: content});
        return function() {

            //infowindow.setContent(content); 
            //close active window if exists
            if(activeWindow != null) activeWindow.close();
            //open new window
            infowindow.open(map, this); //adding listening for window
            activeWindow = infowindow; //store new window in global variable

            };
    }
});

0 ответов

Другие вопросы по тегам