When the map is scaled with the mouse wheel, a piece of the map remains visible, and the rest is a gray background or just a gray background. You can see it here: http://foxycars.ru/contacts.php

<script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzNIyGDobc2t0UwmhweJPEAQP6FLaNqRk&callback=initMap"> </script> <script> var map; function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(<?php echo $center_map; ?>), scrollwheel: true }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); directionsDisplay.setMap(map); directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } ); var start_point = new google.maps.LatLng(<?php echo $coordinates_start; ?>); var end_point = new google.maps.LatLng(<?php echo $coordinates_end; ?>); var marker = new google.maps.Marker({ position: start_point, map: map }); var marker = new google.maps.Marker({ position: end_point, map: map, icon: 'img/marker-car.png' }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, this); }); var request = { origin: start_point, destination: end_point, travelMode: google.maps.TravelMode.WALKING, unitSystem: google.maps.UnitSystem.METRIC, provideRouteAlternatives: true, avoidHighways: false, avoidTolls: true }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); var routes = result.routes; var leg = routes[0].legs; var lenght = leg[0].distance.text; var duration = leg[0].duration.text; infowindow = new google.maps.InfoWindow({ content: 'Дистанция: '+lenght}); infowindow.open(map, marker); } }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
  • show your code please - spectre_it
  • one
    @ stack-it, added - AndreyVitovtov
  • thanks, why is it so difficult? you can not just add javascript code from the map designer? yandex.ru/map-constructor - spectre_it

1 answer 1

The problem is most likely that the API code is connected on the page two times:

 <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzNIyGDobc2t0UwmhweJPEAQP6FLaNqRk&callback=initMap"></script>

Console Message:

You have included the Google Maps API for multiple times on this page. This may cause unexpected errors.

  • The real problem was that the API was connected on the page two times. - AndreyVitovtov