在谷歌地图中创建新的信息窗口
Creating new infowindow in google map
如何创建我们自定义的新信息窗口,而不是谷歌提供的默认窗口。我需要为我的网站创建和自定义一个新的。(不是google.maps.InfoWindow)
如果您不想使用Google默认的InfoWindow,请查看InfoBubble。
infobubble.js是一个单独的文件,非常简单,易于编辑它们的样式。
仅供参考:这得到了广泛的支持,所以如果您遇到任何问题,您甚至可以在这里提出标记为infobubble的问题。
最好不要重新发明轮子,它会消耗你很多时间。但如果你想学习,你可以尝试一下。
您可以使用InfoBox。它基本上扩展了infoWindow类,允许进行更多的自定义和样式设置。
访问此链接以获取infoBOx。
在InfoWindows的情况下,你可以这样做:
var infoWindow = new google.maps.InfoWindow({
content: '<div id="content">'+Content+
'</div>'
});
你可以随心所欲地设计它。
请阅读这篇文章,它会更有帮助。
您只需使用谷歌提供的InfoBox类来实现这一点,您可以在这里找到它。它基本上扩展了infoWindow类,允许进行更多的自定义和样式设置。
更多详细信息阅读此链接和链接
我使用以下脚本在谷歌地图中创建和自定义新的信息窗口
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var locations = [
['chennai', 13.0810, 80.2740, 4],
['madurai', 9.9300, 78.1200, 5],
['coimbatore', 11.0183, 76.9725, 3],
['Trichy', 10.8100, 76.9725, 2],
['vellore', 12.9202, 79.1333, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(13.0810, 80.2740),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var info = '<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"> For more Details <a href="smaatapps.com/citycaching/"><img src="images/i.png" width="46" height="45">' + '</div>';
var marker, i;
var icon='images/';
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'images/pin.png',
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "background-image:url(images/popup.png); width:346px; height:183px;";
boxText.innerHTML = "<p style='padding-left:40px; position:relative;top:20px;color:white; v-align:center;'><table style='color:white;padding-top:60px'><tr><td><img src='images/i.png' width='46' height='45'></td><td><a href='http://smaatapps.com/citycaching/overview.php'>For More Information</a></td></tr></table></p>";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-10, 0)
,zIndex: null
,boxStyle: {
background: "url('popup.png') no-repeat"
,width: "346px"
}
,closeBoxMargin: "22px 29px 2px 2px"
,closeBoxURL: "images/close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
ib.setContent('<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"><p style="padding-top:40px;color:white; padding-left:40px;">' + locations[i][0] + '</p><p style="padding-left:40px; position:relative;top:20px;color:white; v-align:center;"><a href="http://smaatapps.com/citycaching/overview.php?id=' + locations[i][3] + '"><table style="color:white;"><tr><td><img src="images/i.png" width="46" height="45"></td><td>For More Information</td></tr></table></p>' + '</div>');
ib.open(map, marker);
}
})(marker, i));
}
</script>
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息