Показать динамический контент в Google Map infowindow

Я хочу отобразить Tide Times в окне на моей карте Google.Показать динамический контент в Google Map infowindow

Я попытался его с виджетом Погоды и он прекрасно работает: http://jsfiddle.net/nvwjnrhy/

Однако, пытаясь подобным с Tide Times, не работает: http://jsfiddle.net/nvwjnrhy/1/

Вот мой текущий полный код:

var geocoder = new google.maps.Geocoder(); 
 
var marker; 
 
var infoWindow; 
 
var map; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 
    setLocation(); 
 
} 
 

 
function setLocation() { 
 
    var address = '2349 Marlton Pike W, Cherry Hill, NJ 08002'; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     var position = results[0].geometry.location; 
 
     marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: position, 
 
     title: 'Venue Name' 
 
     }); 
 
     map.setCenter(marker.getPosition()); 
 

 
     
 
     var content = document.createElement('div'); 
 
     
 
     var script = document.createElement('script'); 
 
\t \t \t script.src = "https://www.tidetimes.org.uk/grimsby-tide-times.js"; 
 
\t \t \t content.appendChild(script); 
 

 
     infoWindow = new google.maps.InfoWindow({ 
 
     content: content 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', function() { 
 
     infoWindow.open(map, marker); 
 
     }); 
 

 
     //infoWindow.open(map, marker); doesn't work 
 
     google.maps.event.trigger(marker, 'click'); //still doesn't work 
 
    } else { 
 
     // 
 
    } 
 
    }); 
 
} 
 

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

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 10px 0; 
 
    color: #000; 
 
}

<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
 
<div id="map-canvas"></div>

Спасибо за любую помощь в этом :)

источник

2016-03-11 michaelmcgurk

Где код отображения информации об этом API? – geocodezip

Извините, я не понимаю вопроса. Вы можете найти одну строку кода, необходимую для отображения Tide Times здесь: https://www.tidetimes.org.uk/widgets. Помогает ли это? :) – michaelmcgurk

Я слышал, что 'postscribe' может быть полезным инструментом для этой проблемы, но я не совсем уверен, как я буду использовать его в этом случае https://github.com/krux/postscribe – michaelmcgurk

Я не уверен, добавив, что по существу только тег <script>, так как содержимое инфоиндуна будет работать. Вместо этого я думаю, что вам нужно добавить этот файл сценария на свою страницу (возможно, каким-то образом скрытым), а затем прочитать содержимое этого div и добавить его в содержимое infowindow. Что-то вроде:

var script = document.createElement('script'); 
    script.src = "https://www.tidetimes.org.uk/grimsby-tide-times.js"; 
    $('#someDiv').appendChild(script); 

infoWindow = new google.maps.InfoWindow({ 
    content: $('#someDiv').html(); 
});

источник

2016-03-11 09:20:16 duncan

Большое спасибо за это, Дункан. Я посмотрю и попробую это скоро :) – michaelmcgurk

Когда я пробую этот код, я получаю следующее сообщение: 'Не удалось выполнить 'write' on 'Document': невозможно записать в документ из асинхронно- загруженный внешний скрипт, если он явно не открыт. ' – michaelmcgurk

Так что не загружайте этот JS-файл асинхронно, просто выполните'

Показать динамический контент в Google Map infowindow

ответ

Смежные вопросы