Плохо работает масштабирование карты в google maps api

362
08 января 2017, 19:11

При масштабировании карты колесиком мыши, остается кусок карты какой был виден, а все остальное серый фон или вовсе только серый фон. Посмотреть можно здесь: 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>
Answer 1

Проблема скорее всего в том, что код API подключен на странице два раза:

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

Сообщение в консоли:

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

READ ALSO
Возвратить значения CSS свойств $(object).css(&ldquo;margin&rdquo;)

Возвратить значения CSS свойств $(object).css(“margin”)

Необходимо возвратить некоторые из CSS свойств элемента HTML-страницы в понятном виде для Edge, IEКонкретно: необходимо вернуть значения отступов...

286
Удаление класса JS после заполнения поля

Удаление класса JS после заполнения поля

Как удалить класс у другого элемента, после того как было заполнен input или textarea?

319
Callback функция в плагине JQuery

Callback функция в плагине JQuery

Пытаюсь сделать плагин для JqueryВот его максимально упрощенная версия:

366
Упростить код JS (jquery)

Упростить код JS (jquery)

Как сократить скрипт?

309