Контроль масштабирования и уличный обзор не отображаются на моей карте Google?

Я вставляю очень основную карту Google на свою страницу, а значок зуммирования и значок уличной печати не видны, однако, если я надену мышь на место, где они должны быть, я могу увеличить карту и войти в уличное представление. Таким образом, элементы управления просто не видны.

<script type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=IT">
</script>

var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE
    },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Какие идеи могут возникнуть?

Ответ 1

Это определенно проблема с CSS, которая у вас есть с вашим кодом. Найдите CSS, который применяется ко всем изображениям, например:

img {
  max-width: 100%;
}

Ответ 2

У меня была эта проблема, исправление заключалось в том, чтобы включить этот CSS...

.gmnoprint img { max-width: none; }

Селектор CSS .gmnoprint img получает все изображения [img] на элементах управления Google Map [gm], которые не печатаются [noprint]. В моем случае max-width был установлен глобально на 100%. Устранение этой проблемы устранило проблему.

Ответ 3

Лучшее решение для достижения только карты google

.gmnoprint img {
    max-width: none; 
}

Ответ 4

Обратите внимание, что в настоящий момент даже невозможно отобразить полноразмерный слайдер масштабирования на сенсорных устройствах (ipad и т.д.). Здесь документация:

http://code.google.com/apis/maps/documentation/javascript/controls.html

google.maps.ZoomControlStyle.SMALL отображает элемент управления мини-зумом, состоящий только из кнопок + и -. Этот стиль подходит для небольших карт. На сенсорных устройствах этот элемент управления отображается как кнопки + и -, которые реагируют на события касания.

google.maps.ZoomControlStyle.LARGE отображает стандартный регулятор ползунка масштабирования. На сенсорных устройствах этот элемент управления отображается как кнопки + и -, которые реагируют на события касания.

Ответ 5

Я столкнулся с вариантом, причем оскорбительный CSS выглядел следующим образом:

  img {
 max-width: 100%;
 max-height: 100%;
}Код>

Ответ 6

Я думаю, что это может быть проблемой с браузером или кодом на странице, в которую вы вставляете эту карту.

Если я посмотрю на этот простой код hello world, элементы управления отобразятся в порядке. Я геокодировал эту карту в том же месте, что и ваш образец, поэтому он не имеет ничего общего с местоположением.

Что происходит, когда вы используете этот образец?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true&region=it">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(45.38686, 8.91927);
    var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE
        },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>