在一个页面中的多个谷歌地图,通过从页面dom读取lat和lng生成标记

时间:2017-04-28 11:48:36

标签: google-maps-markers

谷歌地图正在按预期工作但当我尝试使用我现有的代码添加多个谷歌地图时我很挣扎,我是js和谷歌地图api的新手。对此的任何帮助都非常感谢。我将在这里添加我的codepen链接,请帮助我。

以下是我的codepen链接:
http://codepen.io/suman/pen/dWMEmp

现有代码:

var googleMap = {
  init: function() {
    var self = this;

    if ($("#map").length > 0) {
      self.triggerMap();
    }
  },

  triggerMap: function() {
    var self = this;

    // Define your locations: HTML content for the info window, latitude, longitude
    // var locations = [{
    //   info: {
    //     name: 'name 1',
    //     url: 'http://google.co.uk',
    //     casualties: '54,000'
    //   },
    //   lat: 51.507351,
    //   lng: -0.12775
    // }];

    var e = [];
    $(".mapMarker").each(function() {
      var self = $(this),
        mainLink = $(".mapLink"),
        lat = self.find(mainLink).data("lat"),
        lng = self.find(mainLink).data("lng"),
        name = self.find(mainLink).text(),
        url = self.find(mainLink).attr("href"),
        casualties = self.find(".casualties").text();

      e.push({
        info: {
          name: name,
          casualties: casualties,
          url: url
        },
        lat: lat,
        lng: lng
      });
    });

    // Initiate the map
    var map = new google.maps.Map(document.getElementById("map"), {
      scrollwheel: false,
      streetViewControl: false,
      zoom: 8
    });

    // Initiate the info window
    var infowindow = new google.maps.InfoWindow();

    // Initiate the bounds function
    var bounds = new google.maps.LatLngBounds();

    // Loop through all the locations to add markers & info windows
    e.forEach(function(location, i) {
      // New marker based on the lat & lng of location
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(location.lat, location.lng),
        map: map,
        icon: "http://maplacejs.com/website/images/red-dot.png"
      });

      // Extend the bounds with the new position used in the marker above
      bounds.extend(marker.position);

      // html for the info window
      var infoContent =
        '<div class="info-content"><h4><a href="' +
        location.info.url +
        '">' +
        location.info.name +
        "</a></h4>" +
        "<p>" +
        location.info.casualties +
        "</p></div>";

      // Listen out for when the marker is clicked and generate the info window
      google.maps.event.addListener(
        marker,
        "click",
        (function(marker, i) {
          return function() {
            infowindow.setContent(infoContent);
            infowindow.open(map, marker);
          };
        })(marker, i)
      );
    });

    // Now we have all the locations added to the bounds variable, tell the map to fit them all in.
    map.fitBounds(bounds);

    var listener = google.maps.event.addListener(map, "idle", function() {
      if (map.getZoom() > 10) map.setZoom(10);
      google.maps.event.removeListener(listener);
    });
  }
};

googleMap.init();

1 个答案:

答案 0 :(得分:1)

你可以查看这个..

对于html部分,您需要2个或更多div来包含地图

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

在您的javascript中,您需要创建2个或更多地图

// Create map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions);

在你的CSS中你可以根据需要为每个地图应用单独的样式

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

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