[英]Display dynamic content inside Google Map infowindow
I have a Widget generated using this website: http://www.forecast.co.uk/widget/ . 我有一个使用此网站生成的Widget: http : //www.forecast.co.uk/widget/ 。
I have my current Google Maps code here: http://jsfiddle.net/8gsqt7xv/ . 我在这里拥有当前的Google Maps代码: http : //jsfiddle.net/8gsqt7xv/ 。
However, instead of blah
in my final version, I'd like to include the widget. 然而,不是
blah
,我最终版本,我想包括小部件。 I tried & failed to do this here: http://jsfiddle.net/8xvgdwzu/ . 我尝试过但失败了: http : //jsfiddle.net/8xvgdwzu/ 。 How do I do this?
我该怎么做呢?
Here's the current working code, without the Forecast widget: 这是当前的工作代码,没有Forecast小部件:
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 = 'blah'; 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 { // } }); } google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas { height: 150px; margin: 10px 0; color: #000; }
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <div id="map-canvas"> </div>
Thank you 谢谢
http://jsfiddle.net/wf9a5m75/8xvgdwzu/2/ http://jsfiddle.net/wf9a5m75/8xvgdwzu/2/
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 div = document.createElement('div');
div.id = "c_050e3e9d159498c53e6f88b44fad6987";
div.class = "normal";
content.appendChild(div);
var h2 = document.createElement('h2');
h2.style.color = "#000000";
h2.style.margin = "0 0 3px";
h2.style.padding = "2px";
h2.style.font = "bold 13px/1.2 Verdana";
h2.style.textAlign = "center";
h2.style.width = "100%";
div.appendChild(h2);
var a = document.createElement("a");
a.href = "http://www.forecast.co.uk/largs.html";
a.style.color = "#000000";
a.style.textDecoration = "none";
a.style.font = "bold 13px/1.2 Verdana";
a.innerText = "Forecast Largs";
div.appendChild(a);
var anotherDiv = document.createElement('div');
anotherDiv.id = "w_050e3e9d159498c53e6f88b44fad6987";
anotherDiv.class = "normal";
anotherDiv.style.height = "100%";
content.appendChild(anotherDiv);
var script = document.createElement('script');
script.src = "http://www.forecast.co.uk/widget/loader/050e3e9d159498c53e6f88b44fad6987";
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.