Google maps API - Откройте информационное окно маркера и установите карту в центр по щелчку элемента, созданного с помощью JavaScript - PullRequest
Новая
       7

Google maps API - Откройте информационное окно маркера и установите карту в центр по щелчку элемента, созданного с помощью JavaScript

3 голосов
/ 05 октября 2011

Вот проблема.

У меня есть список местоположений, поступающих из службы, с помощью которого я создаю список элементов div (адрес местоположения и другие детали), каждый из которых имеет уникальный идентификатор (например, locationA, locationB ..) в левой боковой панели и отображает маркеры на карте в правой части. Я использую цикл for, чтобы перебирать местоположения и устанавливать маркеры и их информационные окна. (карта, маркеры и информационные окна являются глобальными переменными)

Я хочу, чтобы маркер был отцентрирован и открыл его информационное окно, щелкнув по соответствующему элементу div.

Я не могу использовать google.maps.marker.adddomlistener, так как div добавляется через javascript. поэтому я использовал jquery.live () в этом цикле for, чтобы связать событие click, чтобы вызвать событие click соответствующего маркера (поскольку эта функция уже реализована в событии click маркеров). Оказывается, все div открывает первые маркеры в информационном окне.

Вот и я, прошу прощения за размещение всего кода. Я просто хочу, чтобы вы, ребята, поняли ситуацию. 

$('#button').click(function () {
    var zipCode = $('#text-search-input').val();
    GetLocations(zipCode);
});

function GetLocations(zipCode) {

var zip = { zip: zipCode };
$.ajax({
    url: '/locations/',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(zip),
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        $('#locations').html("");
        if (data.length != 0) {
            for (var i = 0; i < data.length; i++) {
                $('#locations').append('<div class="locator-search-results" id=location' + String.fromCharCode(65 + i) + '>' +
                    '<div class="locator-search-index">' + String.fromCharCode(65 + i) +
                    '</div><div class="locator-search-details"><h2>' + data[i].Name +
                    '</h2><p>' + data[i].Address.Address1 + ',<br />' + data[i].Address.City + ',' + data[i].Address.State + '</p></div></div>');
            }
            initializemap(data[0].Lattitude, data[0].Langitude, 11);
            Setmarkers(data);
        }
        else {
            $('#locations').html("");
            $('#locations').append('<div id=location class="locator-search-results"><p><strong>No locations found !</strong></p></div>');
            initializemap(54.14676, -139.004494, 13);
            SetDefaultMarker(54.14676, -139.004494, 'Some Location');
        }

    },
    error: function () {
        $('#locations').html("");
        $('#locations').append('<div id=location class="locator-search-results"><p><strong>No locations found !</strong></p></div>');
        initializemap(54.14676, -139.004494, 13);
        SetDefaultMarker(54.14676, -139.004494, 'Some Location');
    }
});

}

var map;

function initializemap(lat, lang, zoom) {

var myLat;
var myLong;
var marker;
myLat = parseFloat(lat);
myLong = parseFloat(lang);

var latlng = new google.maps.LatLng(myLat, myLong);
var myOptions = {
    zoom: zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function Setmarkers(data) {
var markers = [];
var infowindow = null;

if (data.length != 0) {
    var i = 0;
    for (i = 0; i < data.length; i++) {
        var latlng = new google.maps.LatLng(data[i].Lattitude, data[i].Langitude);

        infowindow = new google.maps.InfoWindow({
            content: "Loading"
        });
        var markerHtml = "<div><p><strong>" + data[i].Name + "</strong><br/>" + data[i].Address.Address1 + "," + data[i].Address.Address2 + "<br/>" + data[i].Address.City + "," + data[i].Address.State + "<br/></p>";
        var iconUrl = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=' + String.fromCharCode(65 + i) + '|00AEFF|000000|';
        var marker = new google.maps.Marker({
            position: latlng,
            title: data[i].Name,
            html: markerHtml,
            icon: iconUrl
        });
        var divid = 'div#location' + String.fromCharCode(65 + i);

        marker.setMap(map);
        markers[i] = marker;

        google.maps.event.addListener(markers[i], 'click', function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
            map.setCenter(this.getPosition());
        });

    }
}
}

function SetDefaultMarker(lat, lng, text) {

var latlng = new google.maps.LatLng(lat, lng);
var iconUrl = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=A|00AEFF|000000|';
var marker = new google.maps.Marker({
    position: latlng,
    title: text,
    icon: iconUrl
});
var infowindow = new google.maps.InfoWindow({
    content: text
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, this);
    map.setCenter(this.getPosition());
});
}
...