2个Google地图位于一个子页面上

时间：2015-01-18 19:55:06

标签： javascript google-maps google-maps-api-3

我在使用谷歌地图时遇到问题，我想在一个子页面上添加两张谷歌地图，但是有一个错误 - 点击一张地图上的标记，发生在第二张地图上。有关地点的信息只能在一张地图上看到。

<!DOCTYPE HTML>
<html>
    <head>
    <title>Maps</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/google_maps.js"></script>
</head>
<body onload="initialize()">
   <div id="map1" style="width: 600px; height: 360px;"></div>
   <div id="map2" style="width: 600px; height: 360px;"></div>
</body>
</html>

的JavaScript 

var markerone = [
         [0, 51.504827, -0.07862599999998565, 'City hall of London', '', '', '', '', '', ''],
        ]
var markertwo = [
         [0, 54.34879, 18.65256899999997, 'City hall of Gdańsk', '', '', '', '', '', ''],
        ]
var markerMemo = null;
var infowindow = null;
var info = new google.maps.InfoWindow({
maxWidth: 230
});
var map;

function initialize() {
    var myOptionsMap1 = {
        zoom: 14,
        center: new google.maps.LatLng(51.50489356890002,-0.07370204693610383),
        disableDefaultUI: true,
        navigationControl: true,
        panControl: true,
        zoomControl: true,
        rotateControl: true,
        overviewMapControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        },
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DEFAULT
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map1"), myOptionsMap1);
        for(var i in markerone) {
        infowindow = '<div class="widows-map"><strong>' + markerone[i][3] + '</strong><p>';
                    if (markerone[i][6] && !markerone[i][7]) {
                        infowindow += markerone[i][6] + '</p>';
                    }
                    if (markerone[i][6] && markerone[i][7]) {
                        infowindow += '<a href="' + markerone[i][7] + '">' + markerone[i][6] + '</a></p>';
                    }
                    if (markerone[i][8]) {
                        infowindow += markerone[i][8] + '<br />';
                    }   
                    if (markerone[i][9]) {
                        infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markerone[i][1] + ', ' + markerone[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
                    }
                    '</div>'
            if (markerone[i][4]) {
                var markerOption =
                {
                    map: map,
                    position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
                    title: markerone[i][3],
                    html: infowindow,
                    icon: document.getElementById('link').href + markerone[i][4],
                    shadow: markerone[i][5]
                }
            } else {
                var markerOption =
                {
                    map: map,
                    position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
                    title: markerone[i][3],
                    html: infowindow
                }
            }
        var marker = new google.maps.Marker(markerOption);
        if (infowindow) {
            google.maps.event.addListener(marker, "click", function ()
        {
            info.setContent(this.html);
            info.open(map, this);
        });
        }   else {
            infowindow = '';
        }
        if (i==0 && infowindow) {markerMemo = marker;}
    }
    if (markerMemo) google.maps.event.trigger(markerMemo, "click");

    var myOptionsMap2 = {
        zoom: 18,
        center: new google.maps.LatLng(54.3488118865322,18.65266287731549),
        disableDefaultUI: true,
        navigationControl: true,
        panControl: true,
        zoomControl: true,
        rotateControl: true,
        overviewMapControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        },
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DEFAULT
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map2"), myOptionsMap2);
        for(var i in markertwo) {
        infowindow = '<div class="widows-map"><strong>' + markertwo[i][3] + '</strong><p>';
                    if (markertwo[i][6] && !markertwo[i][7]) {
                        infowindow += markertwo[i][6] + '</p>';
                    }
                    if (markertwo[i][6] && markertwo[i][7]) {
                        infowindow += '<a href="' + markertwo[i][7] + '">' + markertwo[i][6] + '</a></p>';
                    }
                    if (markertwo[i][8]) {
                        infowindow += markertwo[i][8] + '<br />';
                    }   
                    if (markertwo[i][9]) {
                        infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markertwo[i][1] + ', ' + markertwo[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
                    }
                    '</div>'
            if (markertwo[i][4]) {
                var markerOption =
                {
                    map: map,
                    position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
                    title: markertwo[i][3],
                    html: infowindow,
                    icon: document.getElementById('link').href + markertwo[i][4],
                    shadow: markertwo[i][5]
                }
            } else {
                var markerOption =
                {
                    map: map,
                    position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
                    title: markertwo[i][3],
                    html: infowindow
                }
            }
        var marker = new google.maps.Marker(markerOption);
        if (infowindow) {
            google.maps.event.addListener(marker, "click", function ()
        {
            info.setContent(this.html);
            info.open(map, this);
        });
        }   else {
            infowindow = '';
        }
        if (i==0 && infowindow) {markerMemo = marker;}
    }
    if (markerMemo) google.maps.event.trigger(markerMemo, "click");
}

1 个答案:

答案 0 :(得分：0)

您只有一个地图变量。对于两个唯一的地图，您需要两个地图变量。就像你想要两个独特的infowindows（每个地图上一个）一样，你需要两个独特的infowindow变量（和两个独特的标记变量）。

working fiddle

工作代码段：

var markerone = [
  [0, 51.504827, -0.07862599999998565, 'City hall of London', '', '', '', '', '', ''],
]
var markertwo = [
  [0, 54.34879, 18.65256899999997, 'City hall of Gdańsk', '', '', '', '', '', ''],
]
var markerMemo = null;
var infowindow = null;
var info = new google.maps.InfoWindow({
  maxWidth: 230
});
var map;

function initialize() {
  var myOptionsMap1 = {
    zoom: 14,
    center: new google.maps.LatLng(51.50489356890002, -0.07370204693610383),
    disableDefaultUI: true,
    navigationControl: true,
    panControl: true,
    zoomControl: true,
    rotateControl: true,
    overviewMapControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map1 = new google.maps.Map(document.getElementById("map1"), myOptionsMap1);
  for (var i in markerone) {
    infowindow = '<div class="widows-map"><strong>' + markerone[i][3] + '</strong><p>';
    if (markerone[i][6] && !markerone[i][7]) {
      infowindow += markerone[i][6] + '</p>';
    }
    if (markerone[i][6] && markerone[i][7]) {
      infowindow += '<a href="' + markerone[i][7] + '">' + markerone[i][6] + '</a></p>';
    }
    if (markerone[i][8]) {
      infowindow += markerone[i][8] + '<br />';
    }
    if (markerone[i][9]) {
      infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markerone[i][1] + ', ' + markerone[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
    }
    '</div>'
    if (markerone[i][4]) {
      var markerOption = {
        map: map1,
        position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
        title: markerone[i][3],
        html: infowindow,
        icon: document.getElementById('link').href + markerone[i][4],
        shadow: markerone[i][5]
      }
    } else {
      var markerOption = {
        map: map1,
        position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
        title: markerone[i][3],
        html: infowindow
      }
    }
    var marker1 = new google.maps.Marker(markerOption);
    if (infowindow) {
      google.maps.event.addListener(marker1, "click", function() {
        info.setContent(this.html);
        info.open(map1, this);
      });
    } else {
      infowindow = '';
    }
    if (i == 0 && infowindow) {
      markerMemo = marker1;
    }
  }
  if (markerMemo) google.maps.event.trigger(markerMemo, "click");

  var myOptionsMap2 = {
    zoom: 18,
    center: new google.maps.LatLng(54.3488118865322, 18.65266287731549),
    disableDefaultUI: true,
    navigationControl: true,
    panControl: true,
    zoomControl: true,
    rotateControl: true,
    overviewMapControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map2 = new google.maps.Map(document.getElementById("map2"), myOptionsMap2);
  for (var i in markertwo) {
    infowindow = '<div class="widows-map"><strong>' + markertwo[i][3] + '</strong><p>';
    if (markertwo[i][6] && !markertwo[i][7]) {
      infowindow += markertwo[i][6] + '</p>';
    }
    if (markertwo[i][6] && markertwo[i][7]) {
      infowindow += '<a href="' + markertwo[i][7] + '">' + markertwo[i][6] + '</a></p>';
    }
    if (markertwo[i][8]) {
      infowindow += markertwo[i][8] + '<br />';
    }
    if (markertwo[i][9]) {
      infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markertwo[i][1] + ', ' + markertwo[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
    }
    '</div>'
    if (markertwo[i][4]) {
      var markerOption = {
        map: map2,
        position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
        title: markertwo[i][3],
        html: infowindow,
        icon: document.getElementById('link').href + markertwo[i][4],
        shadow: markertwo[i][5]
      }
    } else {
      var markerOption = {
        map: map2,
        position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
        title: markertwo[i][3],
        html: infowindow
      }
    }
    var marker2 = new google.maps.Marker(markerOption);
    if (infowindow) {
      google.maps.event.addListener(marker2, "click", function() {
        info.setContent(this.html);
        info.open(map2, this);
      });
    } else {
      infowindow = '';
    }
    if (i == 0 && infowindow) {
      markerMemo = marker;
    }
  }
  if (markerMemo) google.maps.event.trigger(markerMemo, "click");
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map1" style="width: 600px; height: 360px;"></div>
<div id="map2" style="width: 600px; height: 360px;"></div>

相关问题
最新问题