Baidu Maps Support

How to implement Baidu Maps with Woosmap Store Locator JS API

Woosmap Store Locator JS API allows developers to display Assets over Baidu Maps in a transparent way.

Add Woosmap Loader and Baidu Maps SDKs right inside your HTML file (both could be loaded asynchronously). For Baidu, specify your Application Key ak as a parameter of your SDK (check Blog Post on Baidu Map for more details).

        <script src=""></script>
<script src=""></script>


Add an HTML Element Container with some style to render the Map in full size. This Container must exist in the DOM before loading the map.

        <div id="my-map" style="position:absolute; top:0; left:0; right:0; bottom:0;">


Load asynchronously the Woosmap Store Locator JS API with the method load(options) of helper class WoosmapLoader.

        const loadOptions = {
  version: '1.4',
  publicKey: 'starbucks-demo-woos',
  callback: main,
  loadJQuery: false

if (window.attachEvent) {
  window.attachEvent('onload', function() {
} else {
  window.addEventListener('load', WoosmapLoader.load(loadOptions), false);


Finally, within the WoosmapLoader callback, create a new BMap.Map. The HTML container element id or element object (my-map is the Id in our case) is given as argument. Pass this BMap Object to your woosmap.BaseView (here a TiledView) and you will see the Map with your Assets.

        function getMap() {
  const map = new BMap.Map('my-map');
  map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 14);
  return map;

function main() {
  const map = getMap();
  const mapView = new woosmap.TiledView(map, woosmapOptions);


Check Blog Post on Baidu Map for more details.

Was this article helpful?
Have more questions? Submit a request