Javascript 在一个页面中显示多个谷歌地图

im使用

hpneo gmaps

插件：

我想使用多个不同位置的地图，现在我有了这个代码，但它只显示了第一个地图

/* Google map */
var map1;
    $(document).ready(function(){
      prettyPrint();
      map1 = new GMaps({
        div: '#map',
        scrollwheel: false,
        lat: 54.7181780,
        lng: 25.2204530,
        zoom: 16
      });

map1.addMarker({
        lat: 54.7181780,
        lng: 25.2204530,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

/* Vilnius */
var map2;
    $(document).ready(function(){
      prettyPrint();
      map2 = new GMaps({
        div: '#vilnius',
        scrollwheel: false,
        lat: 54.8900070,
        lng: 23.9255120,
        zoom: 10
      });

map2.addMarker({
        lat: 54.8900070,
        lng: 23.9255120,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

这里是fiddle代码：-工作正常，但如果我只想显示“维尔纽斯”地图并删除

则不会显示任何地图

---

我做错了什么？

因为div不在那里，第一个调用抛出了一个错误，取消了剩余的调用。您需要检查div是否存在：

---

在尝试调用函数之前，应该先检查div是否存在。最简单的方法是将代码放在

if(document.getElementById('map)){
    //your code
}

另外，我认为将这两段代码放在一个文档中是一个很好的实践

因此，生成的代码如下所示：

var map1, map2;
$(document).ready(function(){
  prettyPrint();
  if(document.getElementById('map')){
    map1 = new GMaps({
      div: '#map',
      scrollwheel: false,
      lat: 54.7181780,
      lng: 25.2204530,
      zoom: 16
    });
    map1.addMarker({
      lat: 54.7181780,
      lng: 25.2204530,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }

  if(document.getElementById('vilnius')){
    prettyPrint();
    map2 = new GMaps({
      div: '#vilnius',
      scrollwheel: false,
      lat: 54.8900070,
      lng: 23.9255120,
      zoom: 10
    });
    map2.addMarker({
      lat: 54.8900070,
      lng: 23.9255120,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }
});

---

我相信，如果div实际上不在HTML中，那么不执行与其中一个映射相关的代码会比测试div是否在HTML中更加优雅。但是我不知道你的项目的结构是怎样的。

你能在JSFIDLE或类似网站上发布一个例子吗？这里：这一切都很好：但是如果我只想显示“维尔纽斯”地图，它不会显示（删除并再次运行），更具体地说，gmaps抛出了一个“没有定义元素”的错误。你应该用它的开发工具看看Chrome，或者Firefox之类的。控制台可以帮助您找到这些错误，并告诉您它们发生在哪里。

var map1, map2;
$(document).ready(function(){
  prettyPrint();
  if(document.getElementById('map')){
    map1 = new GMaps({
      div: '#map',
      scrollwheel: false,
      lat: 54.7181780,
      lng: 25.2204530,
      zoom: 16
    });
    map1.addMarker({
      lat: 54.7181780,
      lng: 25.2204530,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }

  if(document.getElementById('vilnius')){
    prettyPrint();
    map2 = new GMaps({
      div: '#vilnius',
      scrollwheel: false,
      lat: 54.8900070,
      lng: 23.9255120,
      zoom: 10
    });
    map2.addMarker({
      lat: 54.8900070,
      lng: 23.9255120,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }
});