Google maps marker wont show（jQuery）

私は自分のウェブサイトにGoogleマップを持っており、その上にマーカーを置いています。Google maps marker wont show（jQuery）

私のプロジェクトをローカルで実行した場合、マーカは正常に表示されますが、ウェブサイトを置くとマーカーが表示されず、理由もわかりません（スニペットには表示されません）。

#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>

出典

2017-11-30 DatExchanges

はエラーになります "*"メッセージ "：" InvalidValueError：myMapは関数 "、*"ではありません。 '＆callback = myMap'を含むスクリプトのURLを確認してください。たぶんそれはあなたが経験する問題と関係があります... – LinkinTED

私はあなたのコードスニペットでは、このエラーが表示されます。私はHTTPSにそのURLを変更した場合

Mixed Content: The page at 'https://stackoverflow.com/questions/47577158/google-maps-marker-wont-show-jquery#' 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.

、それは（マーカーを示して）動作します。

（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>

出典

2017-11-30 16:50:20 geocodezip

ああ大丈夫です。私は今、何が間違っていたかを見つけようと、長い間費やしています。これは確かにマーカを出さなかった原因でした。どうもありがとう！ – DatExchanges

Google maps marker wont show（jQuery）

答えて

関連する問題