API Карт Google на квадрате

Question

Я использую Squarespace для создания моего сайта и хочу вставить пользовательскую карту с Google Maps javascript api. Я уже получил ключ google api.

Я следовал шаги, как показано ниже:

То, что я пытаюсь архив просто показать карту Google на моем веб.

Шаг 1: Вставьте код вставки блок для HTML

<div id="map_canvas"></div> 

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

<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('map_canvas'), myOptions); 
} 

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

</script> 

Шаг 3: в пользовательской секции CSS

#map_canvas 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 

Но коды, которые я поставил на Squarespace, не сработали. Как мне это сделать? Вот ссылка на мою веб-страницу на Squarespace

Your Site Title

Спасибо !!

Answer 1

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

1-й. поместите свой сценарий, все после </body>

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

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

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

Answer 2

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

Шаг 1: Вставьте блок- кода для HTML < - это не встраивать блок, но блок кода. Я ошибся.

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

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

я изменить только имя ID от '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 
     } 

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

Answer 3

Я сделал то же самое с my site.

То, что я сделал по-другому, не помещает мой # 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> 

Обратите внимание, что я не кладу # полевую холст внутри обертки, не включать ничего в Пользовательские CSS.

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