Javascript 如何在同一页面上创建多个谷歌地图（而不是标记）？

我正在寻找以下问题的解决方案： 我有一个JSON文件，由多个位置组成。每个位置对象都包含经度、纬度和位置标题

我想要的是，对于每个JSON对象，因此对于每个位置，将在同一页面上创建一个新的GoogleMaps。不是硬编码的

我使用非常基本的标记来显示谷歌地图。 您可以在此处看到的实例：

我使用jQuery AJAX读取JSON文件，如下所示：

init: function(){

    // Development
    console.log('init dataController');

    // Declare variables
    var root = this; // This in this function

    $.ajax({
        url: 'api/videoData.js',
        dataType: 'json',
        success: function(data) {

            root.dataArr = data;
            root.objectArr = root.dataArr.content;

            var modelCount = 0;
            var modelTypeCount = 0;


            // When all objects are received
            $.when(

                // Deferred object (probably Ajax request)
                // GET text format
                $.get('directives/format-text.html', function(response){
                    console.log('succes');
                    console.log(response);
                    root.dataModelText = response;
                }), 

                // GET location format
                $.get('directives/format-map.html', function(response){
                    console.log('succes');
                    console.log(response);
                    root.dataModelLocation = response;
                }), 

            )

            .then(function() {
                for (var i = 0; i < data.content.length; i++) {

                    if (data.content[modelCount].type == 'text' || data.content[modelCount].type == 'youtube' || data.content[modelCount].type == 'tickets') {
                        Triptube.dataController.getDataText(root.dataModelText, data, modelCount);
                    }

                    if (data.content[modelCount].type == 'location') {
                        modelTypeCount++;
                        Triptube.dataController.getDataLocation(root.dataModelLocation, data, modelCount, modelTypeCount);
                    }

                    modelCount++;

                }
            });


            function getData() {

                var modelParts = 4;
                var modelCount = 0;

                for (var i = 0; i < modelParts; i++) {

                    if (data.content[modelCount].type == 'location') {
                        console.log('type == location');
                    };

                    modelCount++;
                    console.log(modelCount);
                }

                $('body').removeClass('loading'); 

            } 

        },

        error: function(data) { 
            console.log(data);
            console.log('Houston, we have a problem!');
        }


    });


},

getDataLocation: function(dataModelLocation, data, modelCount, modelTypeCount){

    var root = this;

    var raw_model = root.dataModelLocation;
    model = $(raw_model);
    var dataID = data.content[modelCount].timeTrigger;
    var dataIndex = modelCount;

    model.attr('data-id', dataID);
    model.attr('data-index', dataIndex);

    model.find('.format').addClass(' ' + data.content[modelCount].type);
    model.find('#map').attr('map-id', modelTypeCount);

    $(model).insertBefore('.featured .footer');
}, 

init:function（）{
//发展
log（'init dataController'）；
//声明变量
var root=this；//此函数中的this
$.ajax({
url:'api/videoData.js'，
数据类型：“json”，
成功：功能（数据）{
root.dataArr=数据；
root.objectArr=root.dataArr.content；
var-modelCount=0；
var modelTypeCount=0；
//当接收到所有对象时
美元。什么时候(
//延迟对象（可能是Ajax请求）
//获取文本格式
$.get（'directives/format text.html'，函数（响应）{
console.log（“成功”）；
控制台日志（响应）；
root.dataModelText=响应；
}), 
//获取位置格式
$.get（'directives/format map.html'，函数（响应）{
console.log（“成功”）；
控制台日志（响应）；
root.dataModelLocation=响应；
}), 
)
.然后（函数（）{
对于（var i=0；i

我在寻找解决办法

更新

我得出了以下结论：

根据@Nedvajz的指示，我在地图中平移时出现以下错误：

未捕获类型错误：无法读取未定义的属性“x”

地图id有其唯一的索引，但所有的google地图值都相同：

---

您必须为每个项目创建自己的元素和映射对象。它将允许您为每个地图指定标记。像这样：

使用您提供的文件，请执行以下操作：

函数initMap（）{
变量位置=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052,5]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[‘马鲁布拉海滩’，-33.950198151.259302，1]
];
var映射=[]；
对于（变量i=0；i

这是一支经过修改的代码笔，带有两张地图，如果需要，您应该能够找出如何进一步增加数字

对于html部分，需要2个或更多div来包含映射

<div id="map"></div>
<div id="map2"></div>

在css中，如果需要，可以对每个贴图应用单独的样式

#map {
  height: 400px;
  width: 48%;
  display: block;
  float: left;
}

#map2 {
  height: 400px;
  width: 48%;
  display: block;
  float: left;
}

创建一个

，将地图添加到文档正文中

var mapDiv = document.createElement("div");
mapDiv.setAttribute("id", "map" + i);
// mapDiv.style.height = "500px";
// mapDiv.style.width = "500px";
mapDiv.className = "map";
var body = document.getElementsByTagName("body")[0];
body.appendChild(mapDiv);

在

中创建地图，在中间添加一个标记

maps[i] = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
    position: {
        lat: mapJsonData.locations[i].lat,
        lng: mapJsonData.locations[i].lng
    },
    title: mapJsonData.locations[i].title,
    map: maps[i]
});

代码片段：

函数initMap（）{
var latlng={
拉脱维亚：51.5046803，
液化天然气：-0.1746135
};
变量映射选项={
中心：拉特林，
滚轮：错误，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true
};
var映射=[]；
对于（var i=0；ivar mapDiv = document.createElement("div");
mapDiv.setAttribute("id", "map" + i);
// mapDiv.style.height = "500px";
// mapDiv.style.width = "500px";
mapDiv.className = "map";
var body = document.getElementsByTagName("body")[0];
body.appendChild(mapDiv);

maps[i] = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
    position: {
        lat: mapJsonData.locations[i].lat,
        lng: mapJsonData.locations[i].lng
    },
    title: mapJsonData.locations[i].title,
    map: maps[i]
});