How to insert Baidu dynamic map in cms and kindeditor

It is not difficult to insert a dynamic map into a webpage. Inserting a dynamic map in kindeditor is easier. The latest kindeditor version has added the function of inserting a dynamic map.

What I want to say here is that if a cms is integrated with the previous version of kindeditor, the dynamic map function is NOT INSERTED, or the map size generated by kindeditor is too small to be changed, so what should we do?

By accident, I think of a method. We can first generate the script code according to the method at the beginning of the article, then click the [insert program code] button in kindeditor, select javascript, paste the code generated by Baidu into the pop-up window, save it, refresh the foreground, and you will see that Baidu's dynamic map is generated.

Of course, the css style of the generated dynamic map may be different from what we need, so we need to modify some css styles in the script generated by Baidu.

In addition, we want to place the contact information and other texts below the dynamic map, but after entering the text in kindeditor, refresh the foreground again, we will find that all the generated Map pages are out of order. I think this is due to conflicts between text content, text styles, and map scripts. Why? I don't know.

I found that when I inserted the address script, if it looks like this in the edit box, then when I entered this article below, the front-end page will be out of order.

If the inserted map script is shown below, it is okay to input the text after the script.

If we directly click the insert program code button, and the inserted code will always look like Figure 1, we can try to click [full screen display] and then insert the code, this should be done.

Final effect: