1
これまでに何度も尋ねられてきたことは知っていますが、私が見てきた答えは他にはありません。基本的に、マップのコンテナは（ページ上に500x300ピクセルの空白として）表示されますが、マップはありません。私が何をしても、私は地図を表示することができません。地図が表示されていないGoogleマップのコンテナ
私はおそらく推測しているように、私はGoogleマップに慣れていないので、どんな助けもありがとうございます。ズームを設定し、「オーバーフロー：可視」を追加しました。これは、とりわけ、別の提案です。
うまくいけば、このフィドル作品：https://jsfiddle.net/7cvj565j/
findafitter.php - 地図を
<div class="container text-center">
<div class="row">
<div class="col-sm-8">
<div id="map-container">
<div id="googleMap" style="height:300px; width:500px;">
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script>
<script src="includes/findafitter2.js"></script>
</div>
</div>
</div>
<div class="col-sm-4">
Enter your postcode to find your nearest fitter. Do you have any questions? <a href="contact.php">Let us know!</a>
<input id="address" type="textbox" value="">
<input type="button" value="Find My Nearest Fitter" onclick="checkZip(getElementById('address').value)">
</div>
</div>
</div>
findafitter2.jsを表示されている - 地図
var geocoder;
var map;
var markers = [];
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.768505, -111.853244);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addPostCode('84101');
addPostCode('84102');
addPostCode('84103');
addPostCode('84104');
addPostCode('84105');
}
function addPostCode(zip)
{
geocoder.geocode({ 'address': zip}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
name: zip
});
markers.push(marker);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function checkZip(zip)
{
var distance = Number.MAX_VALUE;
var index = 0;
geocoder.geocode({ 'address': zip}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
for(ix=0; ix< markers.length; ix++)
{
var tmp = getDistance(results[0].geometry.location, markers[ix].position);
if (tmp < distance)
{
distance = tmp;
index = ix;
}
}
alert('nearest zipcode is :' + markers[index].name);
}
});
}
function getDistance(latlng1, latlng2)
{
var R = 6371; // Radius of the earth in km
var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI/180; // Javascript functions in radians
var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI/180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(latlng1.lat() * Math.PI/180) * Math.cos(latlng2.lat() * Math.PI/180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
d = d * 0.621371192; // convert to miles
return d;
}
ためのコードstyles.css - これは私がやって、そのコードが動作することがありますどのように非常に似ている - 該当ビット
#map-container
{
min-height: 300px;
color: #000000;
overflow: visible;
}
Googleマップコードは、SO、私のマップコードは、それを破ったかどうかを確認するために（Google maps - Postcode plotting）を投稿し、他から取りました多くの人々のために。
うまくいけば十分です。前もって感謝します！
代わりにGoogleマップの自動生成iframeを使用してみましたか？ –