News2 v3.15 Joomla 3.3.6 + Baidu Map API

I have some Real Estate listings that I want to add Baidu Maps to. The code works fine here:
http://www.echinaguide.com/test/

However when I try to put it into an article here:
http://www.echinaguide.com/apartments-v ... 40613.html

It doesn't work properly ... again there is some conflict within News2 v3.15 and Joomla 3.3.6 that I can't figure out.

Please HELP! Thanks.

Hi

For start please disable JCH optimisation. I cannot see code with this on. Let me know when this will be disabled.

I have disabled JCH optimization and cleared the cache. I have also tested the same Baidu Map API on another Joomla 3.3.6 install with the Beez3 template and it worked fine.

It seems that there is some incompatibility with News2 or one of the gk coms/mods/plgs installed.

Hi

Ok, I've compared the code and there is no difference in code, so this must be a javascript conflict. I can see fitVids plugin is giving an error on this page, so this may be the reason. Please send me an access to ftp so I'll try disable one after the other to see what is causing the conflict.

It's definitely a conflict with the js used in the News2 template or an installed plugin, module, component. I sent you a PM. Please respond.

I have several commercial websites hosted on the same ftp account. Can I create a joomla superuser account for you rather than give you ftp access to the root where this site is hosted?

Hi

I need to work with code. For start I want to fix the fitVids error I can see in console, maybe this is a cause of it. If You cannot provide me an ftp please maybe use Akeeba Backup and just send me the file with a copy of Your website, so I'll work locally on this problem.

Also, please update template to the latest version. I see in dev reports that there were some changes.

I can do that. Please PM me your email address.

As a side note, China has a HUGE market for joomla templates, especially for ones that can handle the Baidu Maps API. As you know, the most popular Google services are blocked in China (email, maps, analytics, webmater tools, etc.) as well as most social media sites and services.

If anyone wishes to enter China's Template/Theme Marketplace, Baidu services are a must - especially the maps API!

Hi

My email address is in a footer of my every post, but You can just send me a link to the file so I'll be able to download it.

Hi,

I have a better idea ... To make sure this was a problem related to Joomla 3.3.6 + the News2 template, I downloaded and installed the latest gk_news2_quickstart_J!3.zip file from Gavickpro and used the content from here: http://www.echinaguide.com/test/ to create a simple content page within the Joomla 3.3.6 and News2 installed framework.

The result was the same! There is a conflict with the Joomla 3.3.6 + the News2 template install and the Baidu Map API.

So ... can you please simply download and install the gk_news2_quickstart_J!3.zip file from Gavickpro locally to test and resolve this js conflict? Again, here is the working Baidu Map API content: http://www.echinaguide.com/test/

Anyone, Please Help!
Thanks!

Hi

This is just a part of the problem. I still will need an access to Your site to have a working Baidu Map extension I will be able to relay on. fitVids is a matter of updating the library and has already been resolved in newer templates, so still the crucial matter exists.

There is NO decent "working Baidu Map extension" available --- Thus, I did not install one. As you probably know, you do not need an extension to embed a map into a page's content.

Also, there is no key required for this version of Baidu's Map API. This is really simple, copy the code here: http://www.echinaguide.com/test/ between the first and last div and paste it into a new joomla article without out a wysiwyg editor.

Again you will see that there is a conflict between the js of the Baidu Map API and the Joomla 3.3.6+News2 install.

As stated before, "I downloaded and installed the latest gk_news2_quickstart_J!3.zip file from Gavickpro and used the content from here: http://www.echinaguide.com/test/ to create a simple content page within the Joomla 3.3.6 and News2 installed framework...The result was the same! There is a conflict with the Joomla 3.3.6 + the News2 template install and the Baidu Map API." --- I installed this on a local server and did not add any extensions to the gk_news2_quickstart_J!3.zip install !

So please download and install the latest gk_news2_quickstart_J!3.zip on a local server running Joomla 3.3.6 and use the content here: http://www.echinaguide.com/test/ to create a content page within Joomla 3.3.6 + News2 quick-start install. You will see there is a conflict. I hope you can resolve it.

Thanks !

Hi

Ok. I'll do that, but please guide me with this Baidu code. When I'm using the code from Your exemple than I see nothing except lots of errors:

Code: Select all

<div class="baidu-map"><noscript>
&lt;blockquote class="warning"&gt;&lt;b&gt;JavaScript must be enabled in order for you to use Baidu &amp;amp; Google Maps.&lt;/b&gt; &lt;br /&gt;However, it seems JavaScript is either disabled or not supported by your browser. &lt;br /&gt;To view Baidu &amp;amp; Google Maps, enable JavaScript by changing your browser options, and then try again.&lt;/blockquote&gt;
</noscript>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&amp;v=1.4&amp;services=true"></script><script src="http://api.map.baidu.com/getscript?v=1.4&amp;ak=&amp;services=true&amp;t=20141230041930" type="text/javascript"></script>
<div id="dituContent" style="width: 600px; height: 400px; border: 1px solid rgb(204, 204, 204); overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left;"><div style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: grab;"><div class="BMap_mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; width: 600px; height: 400px;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 800;"><div style="position: absolute; cursor: default; left: 163px; top: 64px;" class="BMap_pop"><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 0px; width: 25px; height: 25px;"><div style="background:#fff;border-top:1px solid #ababab;border-left:1px solid #ababab;width:30px;height:30px;"></div></div><div class="BMap_top" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 0px; width: 258px; height: 25px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 283px; top: 0px; width: 25px; height: 25px;"><div style="position:absolute;top:0;left:-6px;background:#fff;border-top:1px solid #ababab;border-right:1px solid #ababab;width:30px;height:30px;"></div></div><div class="BMap_center" style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 25px; width: 306px; height: 62px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 87px; width: 25px; height: 25px;"><div style="position:absolute;top:-6px;left:0;background:#fff;border-bottom:1px solid #ababab;border-left:1px solid #ababab;width:30px;height:30px;"></div></div><div class="BMap_bottom" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 87px; width: 258px; height: 24px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 283px; top: 87px; width: 25px; height: 25px;"><div style="position:absolute;top:-6px;left:-6px;background:#fff;border-right:1px solid #ababab;border-bottom:1px solid #ababab;width:30px;height:30px;"></div></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 137px; top: 87px; width: 34px; height: 50px;"><img src="http://api.map.baidu.com/images/iw3.png" style="border:none;margin:0px;padding:0px;position:absolute;left:-186px;top:-691px;max-width:none; width:690px;height:786px;"></div><div style="width: 276px; height: 80px; position: absolute; left: 16px; top: 16px; z-index: 10; overflow: hidden;"><div style="display: none; overflow: hidden; height: auto; line-height: 24px; white-space: nowrap; width: auto;" class="BMap_bubble_title"></div><div style="width: auto; height: auto;" class="BMap_bubble_content"><b title="Yin Tai Yuan 银泰苑" class="iw_poi_title">Yin Tai Yuan 银泰苑</b><div class="iw_poi_content">1053 FuQiang Road<br>Shenzhen, Guangdong Province. China<br>中国广东省深圳市福田区 福强路1053号</div></div><div style="display:none;position:relative" class="BMap_bubble_max_content"></div></div><img src="http://api.map.baidu.com/images/iw_close1d3.gif" style="position: absolute; top: 12px; width: 10px; height: 10px; -moz-user-select: none; cursor: pointer; z-index: 10000; left: 283px;"><img src="http://api.map.baidu.com/images/iw_plus1d3.gif" style="position: absolute; top: 12px; width: 10px; height: 10px; -moz-user-select: none; cursor: pointer; z-index: 10000; display: none; left: 263px;"></div></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span style="position: absolute; padding: 0px; margin: 0px; border: 0px none; -moz-user-select: none; cursor: pointer; background: url(&quot;http://api.map.baidu.com/images/blank.gif&quot;) repeat scroll 0% 0% transparent; width: 21px; height: 21px; left: 290px; top: 190px; z-index: -4504398;" "="" unselectable="on" class="BMap_Marker BMap_noprint" title=""></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"><div type="infowindow_shadow" style="position: absolute; left: 141px; top: 121px;" class="BMap_shadow"><div style="overflow: hidden; z-index: 1; position: absolute; left: 48px; top: 0px; width: 70px; height: 30px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -323px; top: 0px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 118px; top: 0px; width: 219px; height: 30px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -393px; top: 0px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 337px; top: 0px; width: 70px; height: 30px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -1033px; top: 0px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 29px; top: 30px; width: 89px; height: 19px;"><img src="http://api.map.baidu.com/images/iws3.png" style="top: -30px; left: -304px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 118px; top: 30px; width: 229px; height: 19px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -360px; top: -30px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 347px; top: 30px; width: 89px; height: 19px;"><img src="http://api.map.baidu.com/images/iws3.png" style="top: -30px; left: -1044px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 49px; width: 50px; height: 60px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -14px; top: -310px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 50px; top: 49px; width: 39px; height: 60px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -255px; top: -310px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 89px; top: 49px; width: 140px; height: 60px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -440px; top: -310px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 229px; top: 49px; width: 89px; height: 60px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -255px; top: -310px;" onmousedown="return false"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 318px; top: 49px; width: 70px; height: 60px;"><img src="http://api.map.baidu.com/images/iws3.png" style="left: -754px; top: -310px;" onmousedown="return false"></div></div></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"><label class="BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: none; cursor: inherit; background-color: rgb(190, 190, 190); border: 1px solid rgb(190, 190, 190); padding: 1px; white-space: nowrap; font: 12px arial,sans-serif; z-index: -20000; color: rgb(190, 190, 190);">shadow</label></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"><span style="position: absolute; padding: 0px; margin: 0px; border: 0px none; width: 0px; height: 0px; -moz-user-select: none; left: 290px; top: 190px; z-index: -4504398;" unselectable="on" class="BMap_Marker"><div style="position: absolute; margin: 0px; padding: 0px; width: 21px; height: 21px; overflow: hidden;"><img style="border:none;left:0px; top:0px; position:absolute;" src="http://map.baidu.com/image/us_cursor.gif"></div><label class="BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: none; cursor: pointer; background-color: rgb(255, 255, 255); border: 1px solid rgb(128, 128, 128); padding: 1px; white-space: nowrap; font: 12px arial,sans-serif; z-index: 80; color: rgb(51, 51, 51); left: 9px; top: -20px;">Yin Tai Yuan 银泰苑</label></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 300;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 201;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"></div></div><div style="position: absolute; overflow: visible; top: 0px; left: 0px; z-index: 1;"><div style="position: absolute; overflow: visible; z-index: -100; left: 300px; top: 200px;"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -309px; top: 119px; max-width: none; opacity: 1;" src="http://online2.map.bdimg.com/tile/?qt=tile&amp;x=3099&amp;y=623&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -53px; top: 119px; max-width: none; opacity: 1;" src="http://online3.map.bdimg.com/tile/?qt=tile&amp;x=3100&amp;y=623&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: 203px; top: 119px; max-width: none; opacity: 1;" src="http://online4.map.bdimg.com/tile/?qt=tile&amp;x=3101&amp;y=623&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -53px; top: -137px; max-width: none; opacity: 1;" src="http://online4.map.bdimg.com/tile/?qt=tile&amp;x=3100&amp;y=624&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -309px; top: -137px; max-width: none; opacity: 1;" src="http://online3.map.bdimg.com/tile/?qt=tile&amp;x=3099&amp;y=624&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -309px; top: -393px; max-width: none; opacity: 1;" src="http://online4.map.bdimg.com/tile/?qt=tile&amp;x=3099&amp;y=625&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: 203px; top: -393px; max-width: none; opacity: 1;" src="http://online1.map.bdimg.com/tile/?qt=tile&amp;x=3101&amp;y=625&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: 203px; top: -137px; max-width: none; opacity: 1;" src="http://online0.map.bdimg.com/tile/?qt=tile&amp;x=3101&amp;y=624&amp;z=14&amp;styles=pl&amp;udt=20140928"><img style="-moz-user-select: none; position: absolute; border: medium none; width: 256px; height: 256px; left: -53px; top: -393px; max-width: none; opacity: 1;" src="http://online0.map.bdimg.com/tile/?qt=tile&amp;x=3100&amp;y=625&amp;z=14&amp;styles=pl&amp;udt=20140928"></div></div><div style="position: absolute; overflow: visible; top: 0px; left: 0px; z-index: 2;"></div></div>
<div style="height: 32px; position: absolute; z-index: 10; -moz-user-select: none; bottom: 0px; right: auto; top: auto; left: 1px;" class=" anchorBL"><a title="到百度地图查看此区域" target="_blank" href="http://map.baidu.com/?sr=1" style="outline: medium none;"><img src="http://api.map.baidu.com/images/copyright_logo.png" style="border:none;width:77px;height:32px"></a></div><div style="position:absolute;z-index:0;top:0px;left:0px;overflow:hidden;visibility:hidden;cursor:-moz-grab" id="zoomer"><div style="top:0;left:0;" class="BMap_zoomer"></div><div style="top:0;right:0;" class="BMap_zoomer"></div><div style="bottom:0;left:0;" class="BMap_zoomer"></div><div style="bottom:0;right:0;" class="BMap_zoomer"></div></div><div unselectable="on" class=" BMap_stdMpCtrl BMap_stdMpType0 BMap_noprint anchorTL" style="width: 62px; height: 192px; bottom: auto; right: auto; top: 10px; left: 10px; position: absolute; z-index: 1100; -moz-user-select: none;"><div class="BMap_stdMpPan"><div title="向上平移" class="BMap_button BMap_panN"></div><div title="向左平移" class="BMap_button BMap_panW"></div><div title="向右平移" class="BMap_button BMap_panE"></div><div title="向下平移" class="BMap_button BMap_panS"></div><div class="BMap_stdMpPanBg BMap_smcbg"></div></div><div class="BMap_stdMpZoom" style="height: 147px; width: 62px;"><div title="放大一级" class="BMap_button BMap_stdMpZoomIn"><div class="BMap_smcbg"></div></div><div title="缩小一级" class="BMap_button BMap_stdMpZoomOut" style="top: 126px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSlider" style="height: 108px;"><div class="BMap_stdMpSliderBgTop" style="height: 108px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderBgBot" style="top: 31px; height: 81px;"></div><div title="放置到此级别" class="BMap_stdMpSliderMask"></div><div title="拖动缩放" class="BMap_stdMpSliderBar" style="cursor: grab; top: 31px;"><div class="BMap_smcbg"></div></div></div><div class="BMap_zlHolder"><div class="BMap_zlSt"><div class="BMap_smcbg"></div></div><div class="BMap_zlCity"><div class="BMap_smcbg"></div></div><div class="BMap_zlProv"><div class="BMap_smcbg"></div></div><div class="BMap_zlCountry"><div class="BMap_smcbg"></div></div></div></div></div><div unselectable="on" class=" BMap_omCtrl BMap_ieundefined BMap_noprint anchorBR quad4" style="width: 13px; height: 13px; bottom: 0px; right: 0px; top: auto; left: auto; position: absolute; z-index: 10; -moz-user-select: none;"><div class="BMap_omOutFrame" style="width: 149px; height: 149px;"><div class="BMap_omInnFrame" style="bottom: auto; right: auto; top: 5px; left: 5px; width: 142px; height: 142px;"><div class="BMap_omMapContainer"></div><div class="BMap_omViewMv" style="cursor: grab;"><div class="BMap_omViewInnFrame"><div></div></div></div></div></div><div class="BMap_omBtn BMap_omBtnClosed" style="bottom: 0px; right: 0px; top: auto; left: auto;"></div></div><div unselectable="on" class=" BMap_scaleCtrl BMap_noprint anchorBL" style="bottom: 18px; right: auto; top: auto; left: 81px; width: 70px; position: absolute; z-index: 10; -moz-user-select: none;"><div unselectable="on" class="BMap_scaleTxt" style="background-color: transparent; color: black;">1&nbsp;公里</div><div class="BMap_scaleBar BMap_scaleHBar" style="background-color: black;"><img src="http://api.map.baidu.com/images/mapctrls.png" style="border:none"></div><div class="BMap_scaleBar BMap_scaleLBar" style="background-color: black;"><img src="http://api.map.baidu.com/images/mapctrls.png" style="border:none"></div><div class="BMap_scaleBar BMap_scaleRBar" style="background-color: black;"><img src="http://api.map.baidu.com/images/mapctrls.png" style="border:none"></div></div><div unselectable="on" class=" BMap_cpyCtrl BMap_noprint anchorBL" style="cursor: default; white-space: nowrap; -moz-user-select: none; color: black; background: none repeat scroll 0% 0% transparent; font: 11px/15px arial,sans-serif; bottom: 2px; right: auto; top: auto; left: 81px; position: absolute; z-index: 10;"><span _cid="1"><span style="font-size:11px">&copy; 2015 Baidu&nbsp;- Data &copy; <a style="display:inline;" href="http://www.navinfo.com/" target="_blank">NavInfo</a> &amp; <a style="display:inline;" href="http://www.cennavi.com.cn/" target="_blank">CenNavi</a> &amp; <a style="display:inline;" href="http://www.365ditu.com/" target="_blank">道道通</a></span></span></div></div>
</div>


What code should I have to use it ?