Windows не отображается на маркерах с помощью Google Maps API

Question

Windows не отображается на маркерах с помощью Google Maps API

0

Я делаю маркеры и информационные окна, используя цикл "каждый" с jQuery, чтобы перебирать элементы DOM. Я определил глобальную переменную infomarker, согласно API Карт, это способ сделать так, чтобы за один раз появлялся только один информационный знак. В настоящее время щелчок по маркерам ничего не делает. Как ни странно, вокруг центра карты есть пятно, на которое я могу щелкнуть, чтобы вызвать информатор (с контентом, который прикрепляет его к одному из маркеров). Любая идея, что я могу сделать, чтобы исправить это?

$(function () {
  function initialize() {

    // Get city coordinates .. set map options so map centers on city .. place map on map-canvas  
    var page_city_lat = $("#page_city_lat").text();
    var page_city_lng = $("#page_city_lng").text();
    var mapOptions = {
      center: new google.maps.LatLng(page_city_lat, page_city_lng),
      zoom: 10
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // define concert object, mapCoords
    function Concert(x)
    {
      this.lat = $(x).find(".lat").text();
      this.lng = $(x).find(".lng").text();    
      this.headline = $(x).find(".event_title").text();
      this.venue = $(x).find(".venue").text();
      this.latlng = new google.maps.LatLng(this.lat, this.lng)
    };


    // Global infowindow variable declaration makes only 1 infowindow open at a time. 
    var infowindow = new google.maps.InfoWindow({}); 
    // Necessary to pre-declare variable?
    var map_ids = $(".map_id");
    $.each(map_ids, function (index, value) 
    {
      var listing = new Concert(value);
      var concertString = 'headline: ' + listing.headline + '<br>' + 'Venue' + listing.venue
      var concertMarker = new google.maps.Marker(
      {
        position: listing.latlng,
        map: map,
        title: listing.venue
      });
      infowindow.setContent(concertString);
      google.maps.event.addListener(concertMarker, 'click', function () {
          infowindow.open(map, concertMarker);    
      });
    });
  };
    google.maps.event.addDomListener(window, 'load', initialize);
});

max pleaner 03 апр. 2014, в 00:47

Источник

1

Ваш код работает не так, как ожидалось, но он как-то работает для меня (информационное окно открывается, когда я нажимаю на маркер), поэтому вы должны опубликовать больше деталей или демонстрацию, чтобы иметь возможность идентифицировать основную проблему (после этого мы можем поговорим о других вопросах, например о месте).
Dr.Molle 02 апр. 2014, в 23:34
0

@Dr.MolleDr.Molle, к сожалению, я столкнулся с проблемами при получении карты на heroku, но надеюсь сделать это в ближайшее время. До этого момента, если вы можете запускать приложения rails, вы можете продублировать проблему, клонировав самый последний коммит в основной ветке github.com/maxpleaner/data_streams.
max pleaner 03 апр. 2014, в 02:16
0

@Dr.MolleDr.Molle извините, я забыл дать URL-адрес для перехода на страницу, если вы загружаете приложение ... это localhost: 3000 / map / index? City = oakland или вы можете войти в другой город
max pleaner 03 апр. 2014, в 06:19
0

локальный? Это 3 апреля, а не 1 апреля: D
Dr.Molle 03 апр. 2014, в 08:50
0

@Dr.MolleДоктор Молл, помнишь, я говорил, что столкнулся с проблемами при получении его на Heroku? Кроме того, я упомянул, что вы должны использовать localhost, если вы можете запускать приложения rails? Несмотря на это, он у меня есть онлайн на данный момент по адресу 7b61045c.ngrok.com/map/index?city=oakland (размещенный код см. В основной ветке github.com/maxpleaner/datastreams).
max pleaner 03 апр. 2014, в 19:48

Показать ещё 3 комментария

Теги:

javascript

jquery

google-maps

google-maps-api-3

1 ответ

Ещё вопросы

Ваш код работает не так, как ожидалось, но он как-то работает для меня (информационное окно открывается, когда я нажимаю на маркер), поэтому вы должны опубликовать больше деталей или демонстрацию, чтобы иметь возможность идентифицировать основную проблему (после этого мы можем поговорим о других вопросах, например о месте).
@Dr.MolleDr.Molle, к сожалению, я столкнулся с проблемами при получении карты на heroku, но надеюсь сделать это в ближайшее время. До этого момента, если вы можете запускать приложения rails, вы можете продублировать проблему, клонировав самый последний коммит в основной ветке github.com/maxpleaner/data_streams.
@Dr.MolleDr.Molle извините, я забыл дать URL-адрес для перехода на страницу, если вы загружаете приложение ... это localhost: 3000 / map / index? City = oakland или вы можете войти в другой город
локальный? Это 3 апреля, а не 1 апреля: D
@Dr.MolleДоктор Молл, помнишь, я говорил, что столкнулся с проблемами при получении его на Heroku? Кроме того, я упомянул, что вы должны использовать localhost, если вы можете запускать приложения rails? Несмотря на это, он у меня есть онлайн на данный момент по адресу 7b61045c.ngrok.com/map/index?city=oakland (размещенный код см. В основной ветке github.com/maxpleaner/datastreams).

Anand Deep Singh · Accepted Answer · 2014-04-03T04-50-00.000Z

Не могли бы вы реализовать свой код на jsfiddle.net, чтобы мы могли проверить проблему.

Проверьте ниже рабочий код. Надеюсь, у вас есть идея.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Google Maps Example
</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'>
</script>
</head>
<body>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        var infowindow = null;
        $(document).ready(function () {
            initialize();
        }
                                         );

        function initialize() {

            var centerMap = new google.maps.LatLng(39.828175, -98.5795);

        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        }
                                                                                     );

        var bikeLayer = new google.maps.BicyclingLayer();
        bikeLayer.setMap(map);
    }

var sites = [
['Delhi', 29.45155, 79.00268, 4, 'This is Delhi.'],
        ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park']
    ];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        }
                                                                             );

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        }
                                                                 );
    }
}
</script>

<div id="map_canvas" style="width: 600px; height: 600px;">
</div>
</body>
</html>