Google 地图标记不会显示 (jQuery)

Question

我的网站上有一张 google 地图，我在上面放了一个标记。

如果我运行我的项目在本地，标记显示得很好，但是一旦我将我的网站上线，标记就不会显示，我不知道为什么（不显示在片段之一）。

#map {
  width: 100%;
  height: 450px;
  position: relative;
}

@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA&callback=myMap"></script>

<script>
  var google;

  function init() {
    var myLatlng = new google.maps.LatLng(52.362487, 6.624294);

    var mapOptions = {
      // How zoomed in the map is
      zoom: 15,

      // The latitude and longitude to center the map 
      center: myLatlng
    };



    // Get the HTML DOM element that will contain your map
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using out element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);

    var addresses = ['Dollepret'];

    for (var x = 0; x < addresses.length; x++) {
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
          position: latlng,
          map: map,
          label: {
            fontWeight: 'bold',
            fontSize: '14px',
            text: 'Dolle Pret'
          }
        });

      });
    }

  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

Answer 1

我在你的代码片段中发现了这个错误：

Mixed Content: The page at ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://maps.googleapis.com/maps/api/geocode/json?address=Dollepret&sensor=false'. This request has been blocked; the content must be served over HTTPS.

如果我将 URL 更改为 HTTPS，它会起作用（显示标记）。

（注意不再需要sensor参数）

代码片段：

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0px;
}
#map {
  width: 100%;
  height: 100%;
  position: relative;
}

/* @media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
} */

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA"></script>

<script>
  var google;

  function init() {
    var myLatlng = new google.maps.LatLng(52.362487, 6.624294);

    var mapOptions = {
      // How zoomed in the map is
      zoom: 15,

      // The latitude and longitude to center the map 
      center: myLatlng
    };



    // Get the HTML DOM element that will contain your map
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using out element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);

    var addresses = ['Dollepret'];

    for (var x = 0; x < addresses.length; x++) {
      $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
          position: latlng,
          map: map,
          label: {
            fontWeight: 'bold',
            fontSize: '14px',
            text: 'Dolle Pret'
          }
        });

      });
    }

  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

Google 地图标记不会显示 (jQuery)

Google maps marker wont show (jQuery)

maps

jquery

google-maps

marker

google-maps-markers