jQuery gmaps marker infowindow在开始时不会显示

时间:2016-04-12 12:47:10

标签: javascript jquery google-maps google-maps-api-3

我只有一个关于jQuery Google Maps代码的简单问题。

我已经在地图上添加了一个标记,只有在鼠标悬停之后,infowindow才会在启动时显示。

以下是代码:

(function ($) {
var map;
var lat = XX.XXXXXX;
var lng = X.XXXXX;
var htmlcontent = 'CONTENT';
$(document).ready(function(){
if ( document.getElementById("map") ) {
  map = new GMaps({
    el: '#map',
    lat: lat,
    lng: lng,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : true,
    streetViewControl : false,
    mapTypeControl: true,
    overviewMapControl: true
  });

  var marker = map.addMarker({
    lat: lat,
    lng: lng,
    title: 'THE TITLE',
    infoWindow: {
      content: htmlcontent
    },
    mouseover: function(e){
      this.infoWindow.open(this.map, this);
    }
  });

  marker.infoWindow.open(map.self, marker);
  map.setCenter(XX.XXXXXX, X.XXXXXX);
};
});   
})(jQuery);

所以,这是我遇到问题的部分:

marker.infoWindow.open(map.self, marker);

几周(或几个月)之前它运作良好。

我将在控制台中收到此错误

infowindow.js:4 Uncaught TypeError: Cannot read property 'get' of undefined

和这个警告

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

如何修复标记的信息窗口?

编辑:我单独设置标记的中心,因为标记的弹出窗口根本不居中。

Edit2:添加了API密钥,没有错误或警告,但标记的信息窗口不会在开始时显示

1 个答案:

答案 0 :(得分:1)

google.maps.Map对象是map.map:

代码段

(function($) {
  var map;
  var lat = 42;
  var lng = -72;
  var htmlcontent = 'CONTENT';
  $(document).ready(function() {
    if (document.getElementById("map")) {
      map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng,
        zoomControl: true,
        zoomControlOpt: {
          style: 'SMALL',
          position: 'TOP_LEFT'
        },
        panControl: true,
        streetViewControl: false,
        mapTypeControl: true,
        overviewMapControl: true
      });

      var marker = map.addMarker({
        lat: lat,
        lng: lng,
        title: 'THE TITLE',
        infoWindow: {
          content: htmlcontent
        },
        mouseover: function(e) {
          this.infoWindow.open(this.map, this);
        }
      });

      marker.infoWindow.open(map.map, marker);
      map.setCenter(42, -72);
    };
  });
})(jQuery);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>