Google地图 - 标记群集问题 [英] Google Maps - Marker Cluster issue
本文介绍了Google地图 - 标记群集问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力改进我的Google地图并添加Marker Cluster功能，但我真的不知道如何继续。它仍然给我灰色地图（没有显示）。
有没有人可以检查代码并给我提示？
谢谢。
这是我使用的代码（对于大型数组）：
<脚本类型=text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js><<< ; /脚本>
< script type =text / javascript>
var infowindow = null;
$（document）.ready（function（）{initialize（）;}）;
函数initialize（）{
var centerMap = new google.maps.LatLng（95.32，14.82）;
var myOptions = {
zoom：0，
center：centerMap，
mapTypeId：google.maps.MapTypeId.HYBRID}
var map = new google.maps.Map（document.getElementById（map_radius_canvas），myOptions）;
var markerCluster = new MarkerClusterer（map，sites）;
setMarkers（地图，网站）;
infowindow = new google.maps.InfoWindow（{
content：loading ...
}）;
var LatLngList = new Array（
new google.maps.LatLng（11.0168445，76.9558321），new google.maps.LatLng（11.0168445，76.9558321），new google.maps.LatLng（11.0168445 ，新的google.maps.LatLng（11.0168445,76.9558321），新的google.maps.LatLng（-3.7318616，-38.5266704），新的google.maps.LatLng（21.3967，-157.8994），新的google.maps.LatLng（新的google.maps.LatLng（26.8465108,80.9466832），新的google.maps.LatLng（30.9602，-85.1639），新的google.maps.LatLng（33.9737，-87.0043））;
var bounds = new google.maps.LatLngBounds（）; （var i = 0，LtLgLen = LatLngList.length; i< LtLgLen; i ++）{
bounds.extend（LatLngList [i]）的
;
}
map.fitBounds（bounds）;
var bikeLayer = new google.maps.BicyclingLayer（）;
bikeLayer.setMap（map）;
var sites = [
['Hyper Active / Dyslexia / No Speech / Speech Therapy in Residential School'，11.0168445，76.9558321，'< div style =width ：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171>< img style =width：100 ％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/46_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171>超主动/阅读障碍/无言语/言语在住宅学校的疗法< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font-size：11px ;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171>没有什么可担心的。神圣，整体冥想瑜伽和职业演讲，Akarshane疗法和更多将给你的病房最好的生活和...< / a>< / div>'，'http://your_site.com/oc-content/ plugins / radius_search / img / marker-red.png']
，['住院入学/保证XII EXAMS最高成绩'，11.0168445，76.9558321，'< div style =width：300px; max- width：300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170>< img style =width：100 ％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/45_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170>住宿学校入学/保证最高成绩XII EXAMS< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font-size：11px; text - 装饰：无;溢出：隐藏;文本溢出：省略号;儿童行为问题 - 在IX中， X标准XII - 孩子们不会听父母，尖叫，大喊等等，而......< / a>< / div>'，'http://your_site.com/oc-content/ plugins / radius_search / img / marker-red.png']
，['MATOMULATION BOARD CHILDREN可用的低预算宿舍研究'，11.0168445，76.9558321，'< div style =width：300px; max-width： 300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/44_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; < href =http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169>适用于授课委员会儿童的低预算宿舍研究< a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font-size：11px; text-decoration：none ;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169>您的孩子是否正在学习良好，并且因为您的财务问题？你在你的工作，你的房子和责任之间洗牌了吗？如果...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
，['Want生物学组/第一组高级中学入学申请11'，11.0168445,76.9558321，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow ：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>< img style = width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/43_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>旺旺招生高中对于生物群组/第一组XI /< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font -size：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>你想入学吗+1& amp; amp;数学/生物/计算机科学招生为您的病房？您是否担心您的孩子在......中得分最低？< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png' ]
，['hello tetest'，-3.7318616，-38.5266704，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow ：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit- border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167> hello tetest< / a>< a style =margin-left：2％; width：70％; float ：左;颜色：＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167> test htis is< / a>< / div>'，'http://your_site.com/oc- content / plugins / radius_search / img / marker-red.png']
，['Hayabusa'，21.3967，-157.8994，'< div style =width：300px; max-width：300px; display：block ; height：70px; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/36_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158> Hayabusa< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777 ;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自1500年以来一直是行业标准虚拟文本...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red .png']
，['teste'，45.4278901，-75.6958523，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/animals/teste_i166>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius： 3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/39_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/animals/teste_i166> teste< / a>< a style =margin-left：2％; width：70％; float：left; color： ＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/animals/teste_i166> teste< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/ img / marker-red.png']
，['Car是你的，但是EMI是Ours | Yop Services'，26.8465108,80.9466832，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style = 宽度：28％;浮动：左;明确：两者; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>汽车是你的，但EMI是我们的| Yop服务< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font-size：11px; text - 装饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>广告新概念通过车轮品牌策略进入市场。采用全新的品牌汽车，只需少于一半的...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red .png']
，['Malibu顶级之家'，30.9602，-85.1639，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height ：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/barter/top-house-in-malibu_i28>< img style =width：100％; height：auto; border：1px solid #ddd; - webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/barter/top-house-in-malibu_i28>马里布顶级住宅< / a>< a style =margin-left：2％; width： 70％;浮动：左;颜色：＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/barter/top-house-in-malibu_i28>不包括作为别墅的是domus，精英阶层和特权阶层的城市房屋;以及insulae，其余部分的公寓建筑物块...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red。 png']
，['Bremen'中的'15间别墅'，33.9737，-87.0043，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height ：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27>< img style =width：100％; height：auto; border：1px solid #ddd ; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27> 15间不来梅别墅< / a>< a style =margin-left：2％ ;宽度：70％;浮动：左;颜色：＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27>在古罗马建筑中，别墅最初是为精英而建的乡间别墅。 Pliny the Elder写于公元一世纪，确定...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red。 png']
];
函数setMarkers（map，markers）{
for（var i = 0; i< markers.length; i ++）{
var sites = markers [一世];
var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）;
var marker = new google.maps.Marker（{
position：siteLatLng，
map：map，
title：sites [0]，
html：sites [ 3]，
图标：网站[4]
}）;
var contentString =相关项目;;
google.maps.event.addListener（marker，click，function（）{
infowindow.setContent（this.html）;
infowindow.open（map，this ）;
}）;
}
}
< / script>
解决方案
网站不是google.maps.Markers的数组
类似问题：
解决这个问题的一种方法是在setMarkers函数中创建一个google.maps.Marker对象数组并返回它。工作代码片段：
$ b
var infowindow = null; $（document）.ready （function（）{initialize（）;}）; function initialize（）{var centerMap = new google.maps.LatLng（95.32，14.82）; var myOptions = {zoom：0，center：centerMap，mapTypeId：google.maps.MapTypeId.HYBRID}; var map = new google.maps.Map（document.getElementById（map_radius_canvas），myOptions）; var gmarkers = setMarkers（地图，网站）; var markerCluster = new MarkerClusterer（map，gmarkers）; infowindow = new google.maps.InfoWindow（{content：loading ...}）; var LatLngList = new Array（new google.maps.LatLng（11.0168445,76.9558321），new google.maps.LatLng（11.0168445,76.9558321），new google.maps.LatLng（11.0168445,76.9558321），new google.maps.LatLng（11.0168445 ，新的google.maps.LatLng（-3.7318616，-38.5266704），新的google.maps.LatLng（21.3967，-157.8994），新的google.maps.LatLng（45.4278901，-75.6958523），新的google.maps.LatLng （26.8465108,80.9466832），新的google.maps.LatLng（30.9602，-85.1639），新的google.maps.LatLng（33.9737，-87.0043））; var bounds = new google.maps.LatLngBounds（）; for（var i = 0，LtLgLen = LatLngList.length; i 您的孩子是否正在学习良好，并且因为您的财务问题？你在你的工作，你的房子和责任之间洗牌了吗？如果...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']，['希望在更高中学入学对于生物组/第一组在XI'，11.0168445,76.9558321，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden; >< a style =width：28％; float：left; clear：both; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>< img style = width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/43_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>旺旺招生高中对于生物群组/第一组XI /< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font -size：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168>你想入学吗+1& amp; amp;数学/生物/计算机科学招生为您的病房？您是否担心您的孩子在......中得分最低？< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png' ]，['hello tetest'，-3.7318616，-38.5266704，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden; >< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit- border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167> hello tetest< / a>< a style =margin-left：2％; width：70％; float ：左;颜色：＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/art-collectibles/hello-tetest_i167> test htis is< / a>< / div>'，'http://your_site.com/oc- content / plugins / radius_search / img / marker-red.png']，['Hayabusa'，21.3967，-157.8994，'< div style =width：300px; max-width：300px; display：block; height：70px ; max-height：70px; overflow：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/36_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158> Hayabusa< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777 ;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/vehicles/motorcycles/hayabusa_i158> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自1500年以来一直是行业标准虚拟文本...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red .png']，['teste'，45.4278901，-75.6958523，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden; >< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/animals/teste_i166>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius： 3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/uploads/1/39_thumbnail.jpg/>< / a>< a style =margin-left：2％; font-weight：bold;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/for-sale/animals/teste_i166> teste< / a>< a style =margin-left：2％; width：70％; float：left; color： ＃777;高度：34像素;线高度：12px的;字体大小：11像素;文字修饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/for-sale/animals/teste_i166> teste< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/ img / marker-red.png']，['Car是你的，但EMI是Ours | Yop Services'，26.8465108,80.9466832，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow：hidden;>< a style = 宽度：28％;浮动：左;明确：两者; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>< img style =width：100％; height：auto; border：1px solid #ddd; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight：粗体;宽度：70％;溢出：隐藏;文本溢出：省略号;空白：NOWRAP;浮动：左;颜色：＃333;文字修饰：下划线;字体大小：13像素;边距：4像素; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>汽车是你的，但EMI是我们的| Yop服务< / a>< a style =margin-left：2％; width：70％; float：left; color：＃777; height：34px; line-height：12px; font-size：11px; text - 装饰：无;溢出：隐藏;文本溢出：省略号; href =http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165>广告新概念通过车轮品牌策略进入市场。采用全新的品牌汽车，只需少于一半的...< / a>< / div>'，'http://your_site.com/oc-content/plugins/radius_search/img/marker-red .png']，['Malibu顶楼'，30.9602，-85.1639，'< div style =width：300px; max-width：300px; display：block; height：70px; max-height：70px; overflow ：hidden;>< a style =width：28％; float：left; clear：both; href =http://your_site.com/for-sale/barter/top-house-in-malibu_i28>< img style =width：100％; height：auto; border：1px solid #ddd; - webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; src =http://your_site.com/oc-content/themes/sofia/images/no_photo.gif/>< / a>< a style =margin-left：2％; font-weight： bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px; \" href=\"http://your_site.com/for-sale/barter/top-house-in-malibu_i28\">Top House in Malibu</a><a style=\"margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;\" href=\"http://your_site.com/for-sale/barter/top-house-in-malibu_i28\">Not included as villae were the domus, a city house for the élite and privileged classes; and insulae, blocks of apartment buildings for the rest of t...</a></div>’, ’http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png’], [’15 rooms Villa in Bremen’, 33.9737, -87.0043, ’<div style=\"width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;\"><a style=\"width:28%;float:left;clear:both;\" href=\"http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27\"><img style=\"width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;\" src=\"http://your_site.com/oc-content/themes/sofia/images/no_photo.gif\"/></a><a style=\"margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;\" href=\"http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27\">15 rooms Villa in Bremen</a><a style=\"margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;\" href=\"http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27\">In ancient Roman architecture a villa was originally a country house built for the élite. Pliny the Elder, writing in the first century CE, identified...</a></div>’, ’http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png’]];function setMarkers(map, markers) { var gmarkers = []; for (var i = 0; i < markers.length; i++) { var sites = markers[i]; var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: sites[0], html: sites[3] /*, icon: sites[4] */ }); var contentString = \"Related items\"; google.maps.event.addListener(marker, \"click\", function() { infowindow.setContent(this.html); infowindow.open(map, this); }); } return gmarkers;} html,body,#map_radius_canvas { height: 100%;宽度：100％; margin：0px; padding: 0px}<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src=\"https://maps.googleapis.com/maps/api/js?v=3\"></script><script src=\"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js\"></script><div id=\"map_radius_canvas\"></div>I am trying to improve my Google Map and add there Marker Cluster function but I really do not know how to continue. It still give me gray map (nothing shown).
Is there anyone whould could check the code and give me tips?
Thanks.
This is code I use (sorry for large array):
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(95.32, 14.82);
var myOptions = {
zoom: 0,
center: centerMap,
mapTypeId: google.maps.MapTypeId.HYBRID }
var map = new google.maps.Map(document.getElementById("map_radius_canvas"), myOptions);
var markerCluster = new MarkerClusterer(map, sites);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var LatLngList = new Array (
new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(-3.7318616, -38.5266704), new google.maps.LatLng(21.3967, -157.8994), new google.maps.LatLng(45.4278901, -75.6958523), new google.maps.LatLng(26.8465108, 80.9466832), new google.maps.LatLng(30.9602, -85.1639), new google.maps.LatLng(33.9737, -87.0043) );
var bounds = new google.maps.LatLngBounds ();
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
bounds.extend (LatLngList[i]);
}
map.fitBounds (bounds);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Hyper Active / Dyslexia / No Speech / Speech Therapy in Residential School', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/46_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171">Hyper Active / Dyslexia / No Speech / Speech Therapy in Residential School</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171">Nothing to Worry. Divine, Holistic Meditation Yoga and occupational speech, Akarshane therapies and lots more would give your wards the best life and ...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['RESIDENTIAL SCHOOL ADMISSIONS / SECURING THE HIGHEST RESULTS IN XII EXAMS', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/45_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170">RESIDENTIAL SCHOOL ADMISSIONS / SECURING THE HIGHEST RESULTS IN XII EXAMS</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170">Behaviour Issues in YOUR CHILDREN - In IX, X standards as well XII - The Children are not listening to the Parents, screaming, shouting etc, while you...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['LOW BUDGET HOSTEL STUDIES AVAILABLE FOR MATRICULATION BOARD CHILDREN', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/44_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169">LOW BUDGET HOSTEL STUDIES AVAILABLE FOR MATRICULATION BOARD CHILDREN</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169">Are your children studying good and because of your Financial issues? Are you getting shuffled between your job, your house and Responsibilities? If ...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['Want Admissions in Higher Secondary for Biology Group / First Group in XI', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/43_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168">Want Admissions in Higher Secondary for Biology Group / First Group in XI</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168">Do you want admission in +1 & Maths / Biology / Computer Science admissions for your ward? Do you fear your children would score minimum marks in...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['hello tetest', -3.7318616, -38.5266704, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167">hello tetest</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167">test htis is</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['Hayabusa', 21.3967, -157.8994, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/36_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158">Hayabusa</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['teste', 45.4278901, -75.6958523, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/animals/teste_i166"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/39_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/animals/teste_i166">teste</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/animals/teste_i166">teste</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['Car Is your but EMI is Ours | Yop Services', 26.8465108, 80.9466832, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165">Car Is your but EMI is Ours | Yop Services</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165">New concept of advertisement is coming in the market through strategy of branding on wheels. TAKE A NEW BRAND CAR ONLY ON LESS THAN HALF AMOUNT OF THE...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['Top House in Malibu', 30.9602, -85.1639, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28">Top House in Malibu</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28">Not included as villae were the domus, a city house for the élite and privileged classes; and insulae, blocks of apartment buildings for the rest of t...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
, ['15 rooms Villa in Bremen', 33.9737, -87.0043, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27">15 rooms Villa in Bremen</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27">In ancient Roman architecture a villa was originally a country house built for the élite. Pliny the Elder, writing in the first century CE, identified...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
html: sites[3],
icon: sites[4]
});
var contentString = "Related items";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
解决方案
sites is not an array of google.maps.Markers
Similar questions:
One way to fix that is to create an array of google.maps.Marker objects in the setMarkers function and return it. Working code snippet:
var infowindow = null;
$(document).ready(function() {
initialize();
});
function initialize() {
var centerMap = new google.maps.LatLng(95.32, 14.82);
var myOptions = {
zoom: 0,
center: centerMap,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_radius_canvas"), myOptions);
var gmarkers = setMarkers(map, sites);
var markerCluster = new MarkerClusterer(map, gmarkers);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var LatLngList = new Array(
new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(11.0168445, 76.9558321), new google.maps.LatLng(-3.7318616, -38.5266704), new google.maps.LatLng(21.3967, -157.8994), new google.maps.LatLng(45.4278901, -75.6958523), new google.maps.LatLng(26.8465108, 80.9466832), new google.maps.LatLng(30.9602, -85.1639), new google.maps.LatLng(33.9737, -87.0043));
var bounds = new google.maps.LatLngBounds();
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
bounds.extend(LatLngList[i]);
}
map.fitBounds(bounds);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Hyper Active / Dyslexia / No Speech / Speech Therapy in Residential School', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/46_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171">Hyper Active / Dyslexia / No Speech / Speech Therapy in Residential School</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/hyper-active-dyslexia-no-speech-speech-therapy-in-residential-school_i171">Nothing to Worry. Divine, Holistic Meditation Yoga and occupational speech, Akarshane therapies and lots more would give your wards the best life and ...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['RESIDENTIAL SCHOOL ADMISSIONS / SECURING THE HIGHEST RESULTS IN XII EXAMS', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/45_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170">RESIDENTIAL SCHOOL ADMISSIONS / SECURING THE HIGHEST RESULTS IN XII EXAMS</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/residential-school-admissions-securing-the-highest-results-in-xii-exams_i170">Behaviour Issues in YOUR CHILDREN - In IX, X standards as well XII - The Children are not listening to the Parents, screaming, shouting etc, while you...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['LOW BUDGET HOSTEL STUDIES AVAILABLE FOR MATRICULATION BOARD CHILDREN', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/44_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169">LOW BUDGET HOSTEL STUDIES AVAILABLE FOR MATRICULATION BOARD CHILDREN</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/low-budget-hostel-studies-available-for-matriculation-board-children_i169">Are your children studying good and because of your Financial issues? Are you getting shuffled between your job, your house and Responsibilities? If ...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['Want Admissions in Higher Secondary for Biology Group / First Group in XI', 11.0168445, 76.9558321, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/43_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168">Want Admissions in Higher Secondary for Biology Group / First Group in XI</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/classes/tutoring-private-lessons/want-admissions-in-higher-secondary-for-biology-group-first-group-in-xi_i168">Do you want admission in +1 & Maths / Biology / Computer Science admissions for your ward? Do you fear your children would score minimum marks in...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['hello tetest', -3.7318616, -38.5266704, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167">hello tetest</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/art-collectibles/hello-tetest_i167">test htis is</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['Hayabusa', 21.3967, -157.8994, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/36_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158">Hayabusa</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/vehicles/motorcycles/hayabusa_i158">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['teste', 45.4278901, -75.6958523, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/animals/teste_i166"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/uploads/1/39_thumbnail.jpg"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/animals/teste_i166">teste</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/animals/teste_i166">teste</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['Car Is your but EMI is Ours | Yop Services', 26.8465108, 80.9466832, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165">Car Is your but EMI is Ours | Yop Services</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/vehicles/cars/car-is-your-but-emi-is-ours-yop-services_i165">New concept of advertisement is coming in the market through strategy of branding on wheels. TAKE A NEW BRAND CAR ONLY ON LESS THAN HALF AMOUNT OF THE...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['Top House in Malibu', 30.9602, -85.1639, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28">Top House in Malibu</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/barter/top-house-in-malibu_i28">Not included as villae were the domus, a city house for the élite and privileged classes; and insulae, blocks of apartment buildings for the rest of t...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png'],
['15 rooms Villa in Bremen', 33.9737, -87.0043, '<div style="width:300px;max-width:300px;display:block;height:70px;max-height:70px;overflow: hidden;"><a style="width:28%;float:left;clear:both;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27"><img style="width:100%;height:auto;border:1px solid #ddd;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" src="http://your_site.com/oc-content/themes/sofia/images/no_photo.gif"/></a><a style="margin-left:2%;font-weight:bold;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;color:#333;text-decoration:underline;font-size:13px;margin-bottom:4px;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27">15 rooms Villa in Bremen</a><a style="margin-left:2%;width:70%;float:left;color:#777;height:34px;line-height:12px;font-size:11px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;" href="http://your_site.com/for-sale/animals/15-rooms-villa-in-bremen_i27">In ancient Roman architecture a villa was originally a country house built for the élite. Pliny the Elder, writing in the first century CE, identified...</a></div>', 'http://your_site.com/oc-content/plugins/radius_search/img/marker-red.png']
];
function setMarkers(map, markers) {
var gmarkers = [];
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
html: sites[3]
/*,
icon: sites[4] */
});
var contentString = "Related items";
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
return gmarkers;
}
html,
body,
#map_radius_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_radius_canvas"></div>
这篇关于Google地图 - 标记群集问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
