Я не могу получить свой код, чтобы всплывающее окно с информацией появлялось при нажатии на маркер - PullRequest
Новая
       44

Я не могу получить свой код, чтобы всплывающее окно с информацией появлялось при нажатии на маркер

0 голосов
/ 02 января 2019

Так что я использую плагин / надстройку infobox для API Google Maps, и я могу заставить маркер появляться, но когда я нажимаю на него, ничего не происходит. Мой код в основном из примера, но по какой-то причине он не появляется как следует. Нужно ли мне каким-либо образом импортировать его, если его еще нет? (Потому что, когда я объявляю новый InfoBox, InfoBox не выделяется). Что мне делать?

Плагин Infobox: https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js

Мой jsfiddle: https://jsfiddle.net/kaidemarco/06wpx75j/49/

* Также я попытался отформатировать, используя show your code, но он не работал идеально. 

function initMap() {
  var Jays = {lat:  39.280126,lng: -74.574394};

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: Jays
  });

var marker = new google.maps.Marker({
            map: map,
            draggable: false,
            position: Jays,
            visible: true
        });

var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };


google.maps.event.addListener(marker, "click", function (e) {
            ib.open(map, this);
      });
      var ib = new InfoBox(myOptions);
        ib.open(map, marker);

}

1 Ответ

0 голосов
/ 02 января 2019

Проблема в том, что информационный блок зависит от API JavaScript Карт Google.Один из способов исправить это - синхронно загрузить API и InfoBox в правильном порядке. 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>

Вызвать функцию initMap при загрузке окна: 

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

доказательство концепции скрипки

screenshot of resulting map

function initMap() {
  var Jays = {
    lat: 39.280126,
    lng: -74.574394
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: Jays
  });

  var marker = new google.maps.Marker({
    map: map,
    draggable: false,
    position: Jays,
    visible: true
  });

  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
  boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  google.maps.event.addListener(marker, "click", function(e) {
    ib.open(map, this);
  });
  var ib = new InfoBox(myOptions);
  ib.open(map, marker);

}
google.maps.event.addDomListener(window, 'load', initMap);
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>
<div id="map"></div>
...