API Карт Google на Squarespace

LoL, ты поместил скрипт в очень неправильное место, я думаю.

1-й. поставь свой скрипт, все это после </body>

2-й. вам нужна обложка для ваших карт <div>, например, обертка или около того, чтобы поместить ее в центр. и используя div обложки/обертки, вы можете управлять размером и формой.

3-й. я не знаю id="maps_canvas". потому что из Google я получил это <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, это был gmap_canvas. и поместите в него стиль, чтобы они соответствовали вашему разделу обложки/обертки.

более простой способ: http://embedgooglemaps.com/en/ возможно, это поможет. :)

Это то, что я изменил в своем коде, как показано ниже:

Шаг 1. Вставьте блок кода для html ‹ — это был не блок встраивания, а блок кода. Я опечатался раньше.

<div id="mapWrapper">
    <div id='gmap_canvas' style='height:100%;width:100%; position:static'>  
    </div>
</div>

Шаг 2: вставьте javascript в заголовок страницы.

Я меняю только имя идентификатора с 'map_canvas' на 'gmap_canvas'

<script  type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>

<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Шаг 3: в пользовательском разделе css.

Имя идентификатора изменено с «map_canvas» на «mapWrapper», а затем установлен другой размер.

#mapWrapper 
        {
         width: 750px;
         height: 500px;
         margin: 0px;
         padding: 0px
       }

Я пытался поставить большую часть всего, что мне советовали люди, но все равно карта не подходит на мой сайт. Что-то еще не так?

Я сделал то же самое с своим сайтом.

Что я сделал по-другому, так это не поместил свой #map-canvas в обертку. При предварительном просмотре своего сайта вы можете найти свой gmap_canvas в режиме проверки? Возможно, контент есть, просто не отображается должным образом.

Мой код:

Следующее находится в поле ввода кода заголовка страницы. Обратите внимание, что большая часть этого кода (и я не помню, какие части, так как я не знаю JS) предназначена только для удержания булавки по центру на разных размерах экрана.

<style type="text/css">
       html, body, #map-canvas { 
         height: 400px; 
         width 960px; 
         margin: 0; 
         padding: 0;}         

      #banner-area-wrapper {
        display: none;
      }

     </style>
     <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
     </script>
     <script type="text/javascript">
       function detectBrowser() {
   var useragent = navigator.userAgent;
   var mapdiv = document.getElementById("map-canvas");

   if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
     mapdiv.style.width = '100%';
     mapdiv.style.height = '100%';
   } else {
     mapdiv.style.width = '600px';
     mapdiv.style.height = '800px';
   }
 }
       function initialize() {

 var myLatLng = {lat: 39.910073, lng: -82.965509};
         var mapOptions = {
           center: myLatLng,
           zoom: 14,
           panControl: false,
           mapTypeControl: false,
            zoomControl: true,
             zoomControlOptions: {
             style: google.maps.ZoomControlStyle.DEFAULT,
             position: google.maps.ControlPosition.LEFT_CENTER},
           streetViewControl: false
         };
         var map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);

 map = new google.maps.Map(document.getElementById('map-canvas'),
           mapOptions);

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Opportunity Center'
  });

 google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
       }

На странице у меня есть блок кода со следующим:

 <div id="map-canvas" style="width:90%;margin:auto;"></div>

Обратите внимание, что я не помещал свой #map-canvas в оболочку и не включал ничего в пользовательский CSS.

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