谷歌地图没有显示在手机上

Question

我正在编写我们的网站联系我们页面，并希望使用API密钥来使用我们的位置的谷歌地图。地图显示在桌面上，但当页面加载到手机上时，它不会显示地图。我的代码如下：

HTML

<div id="contact">
<section class="mb-4">
<div>
<h4 class="h1-responsive font-weight-bold text-center my-4">Contact information</h4>
</div>
<div class="row">
<div class="col-lg-12" id="contact">
<div class="row text-center">
<div class="col-md-4">
<i class="fas fa-map-marker-alt fa-2x"></i></a>
<p>Address</p>
</div>
<div class="col-md-4">
<i class="fas fa-phone fa-2x"></i></a>
<p>Telephone</p>
</div>
<div class="col-md-4">
<i class="fas fa-envelope fa-2x"></i></a>
<p>email</p>
</div>
</div>
</div>
<div class="col-md-5 text-center">
<div id="map" class="map-item"></div>
</div>
<div class="col-md-7 mb-md-0 mb-5">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Please specify your need *</label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value=""></option>
<option value="Request quotation">Request quotation</option>
<option value="Request order status">Request order status</option>
<option value="Request copy of an invoice">Request copy of an invoice</option>
<option value="Other">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Your message *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">
<strong>*</strong> These fields are required.
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</div>f

JS-

<script type="text/javascript">
var map;
function drawMap() {
var LatLng = {lat: 0.000, lng: 0.000};
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
fullscreenControl: false 
}     
map = new google.maps.Map(document.getElementById("map"), {
mapOptions,
zoom: 18,
center: LatLng
});
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Here am I'
});  
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API&callback=drawMap">
</script>

CSS：

#map {
height: 100%;
width: 100%;
}

任何可能导致此问题的帮助都将不胜感激。如果我使用嵌入式iframe地图，它会显示在手机上，但这不是我想要使用的。

Answer 1

您的mapdiv位于div容器内，该容器也必须具有高度和宽度。请查看这个正在工作的jsfiddle。以下完整代码：

HTML

<div id="contact">
<section class="mb-4">
<div>
<h4 class="h1-responsive font-weight-bold text-center my-4">Contact information</h4>
</div>
<div class="row">
<div class="col-lg-12">
<div class="row text-center">
<div class="col-md-4">
<i class="fas fa-map-marker-alt fa-2x"></i>
<p>Address</p>
</div>
<div class="col-md-4">
<i class="fas fa-phone fa-2x"></i>
<p>Telephone</p>
</div>
<div class="col-md-4">
<i class="fas fa-envelope fa-2x"></i>
<p>email</p>
</div>
</div>
</div>
<div class="col-md-5 text-center">
<div id="map" class="map-item"></div>
</div>
<div class="col-md-7 mb-md-0 mb-5">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Please specify your need *</label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value=""></option>
<option value="Request quotation">Request quotation</option>
<option value="Request order status">Request order status</option>
<option value="Request copy of an invoice">Request copy of an invoice</option>
<option value="Other">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Your message *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">
<strong>*</strong> These fields are required.
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=drawMap"></script>

JS-

var map;
function drawMap() {
var LatLng = {
lat: 0.000,
lng: 0.000
};
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
fullscreenControl: false
}
map = new google.maps.Map(document.getElementById("map"), {
mapOptions,
zoom: 4,
center: LatLng
});
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Here am I'
});
}

CSS

#map {
height: 100%;
width: 100%;
}
.col-md-5 {
height: 300px;
width: 300px;
}

希望这能有所帮助！