Go to these websites that provide maps to see if they provide interfaces. Some of them can be directly imported using iframes.

Baidu and Amap both have related JS api, which can completely solve your needs http://lbsyun.baidu.com/index...

This is what I found for you in a project I did not long ago. What it achieves is converting the address names on the page into longitude and latitude coordinates and marking them on the map. There are things you can use in it. You need to build multiple maps. If so, just put a few more <p id="allmap" class="baidumap"></p>. Of course, the ID needs to be changed. Also make a copy of the initialization in JS, and change map to the method behind map1. It is not complicated to change the parameters to a new ID. You can figure it out by yourself. If you still don’t understand, please add friends, QQ 269144551, and learn and discuss together

Lane 130, Beijing West Road, Huangpu District, Shanghai
<p id="allmap" class="baidumap"></p>

<script type="text/javascript" src="http://api.map.baidu.com/api?...Write your key here. If you don’t have one, go to Baidu Developer to create one, it’s free* *"></script>
<script type="text/javascript">

//百度地图api
//获取项目地址信息
var product_address = $('.product-address').text();

//初始化地图
var map = new BMap.Map("allmap");
map.centerAndZoom('上海市', 12);
map.setCurrentCity("上海市");

//添加缩放
var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
});
map.addControl(navigationControl);

// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess");
geolocationControl.addEventListener("locationError", function (e) {
    //定位失败事件
    alert(e.message);
});
map.addControl(geolocationControl);

//获取地址经纬度
var geocoder = new BMap.Geocoder();
geocoder.getPoint(product_address, function (point) {
    if (point) {
        var lng = point.lng;
        var lat = point.lat;
        map.centerAndZoom(product_address, 20);
        var marker = new BMap.Marker(new BMap.Point(121.477904, 31.242809));
        map.addOverlay(marker);
    }
}, '上海市');

</script>

Baidu Map API, please read the documentation yourself.