Я пишу, что наши веб-сайты связываются с нами и хотят использовать Карты Google, используя ключ 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, она отображается на мобильном телефоне, но это не то, что я хочу использовать.