how to customize the basic infowindow with tabs displayed using GInfoWindowTab on google map
-
10-10-2019 - |
Question
I have the following function to display the infowindow with tabs on google map using GInfoWindowTab ,the default infowindow is displayed with two tabs ,my question is how can i change the size ,background color and styles of the infowindow and can i add videos into one of the tab in infowindow.
function createMarker(point, name, address, imagepath) {
var marker = new GMarker(point, gicons[imagepath]);
var html1 = '<span class="name-tab"><b>' + name + '</b></span> <span class="info"><br/>' + address + '</span>';
var content = '<img width="100" Height="100" src="http://www.visitingdc.com/images/golden-gate-bridge-picture.jpg" />';
GEvent.addListener(marker, 'click', function() {
var infoTabs = [new GInfoWindowTab("Address", html1), new GInfoWindowTab("Images", content)];
marker.openInfoWindowTabsHtml(infoTabs);
});
Solution
try
<div id="infoWin" style:"background-color:#000 ;...." > content </div>
or use a class from your css/style.css
About videos in the tabs,yes you can embed a link for a video
google.maps.event.addListener(marker, "click", function(){
bubble = new google.maps.InfoWindow({
content: '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UmFjNiiVk9w?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UmFjNiiVk9w?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
})
bubble.open(map, marker);
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow