谷歌地图中的多个标记，多个地图

Question

我试图在同一页面中构建2张谷歌地图。其中一张地图有几个标记......

// $car_plate should in XXX-1111, or XXX-111(three letters in uppercase followed by a dash and four or three numbers)
<?php
    $car_plate = $values['car_plate'];
    if (!preg_match('[A-Z]{3}-[0-9]{3|4}$', $car_plate)) {
        $this->errors ="Pattern for plate number is XXX-1111 or XXX-111";
    } else {
        // code to submit
    }
?>

map2的标记不可点击...我尝试在循环中执行function initializeMap() { var locations = [ ['PARIS - FRANCE', 485.810,2.2629], ['PARIS - FRANCE', 49.046,2.330], ['PARIS - FRANCE', 48.4331,2.2134], ['PALERMO - ITALY', 38.1033,1.3527], ['ROME - ITALY', 41.4846,1.21511] ]; var lat = '48.900401'; var lon = '2.231761'; var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>'; var centerLon = lon - 0.0105; var myOptions = { scrollwheel: false, draggable: false, disableDefaultUI: true, center: new google.maps.LatLng(lat, centerLon), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; //Bind map to elemet with id map-canvas var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(lat, lon), title: 'XXX' }); var infowindowW = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function () { infowindowW.open(map, marker); }); infowindowW.open(map, marker); var myOptions = { scrollwheel: true, draggable: true, disableDefaultUI: false, center: new google.maps.LatLng(66.6846, -67.21511), zoom: 2.82, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions); var i; for (i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map2, title: locations[i][0] }); var infowindow = new google.maps.InfoWindow({ content: locations[i][0] }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map2, marker); } })(marker, i)); } } 但它只是使代码无效（marker[i]不是函数）

有什么想法吗？

Answer 1

缩放是一个整数。出于某种原因，这个：

   zoom: 2.82,

导致问题。将其更改为2和it works。

代码段：

＆＃13;

＆＃13;

function initializeMap() {
  var locations = [
    ['PARIS - FRANCE', 48.810, 2.2629],
    ['PARIS - FRANCE', 49.046, 2.330],
    ['PARIS - FRANCE', 48.4331, 2.2134],
    ['PALERMO - ITALY', 38.1033, 1.3527],
    ['ROME - ITALY', 41.4846, 1.21511]
  ];

  var lat = '48.900401';
  var lon = '2.231761';
  var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>';
  var centerLon = lon - 0.0105;
  var myOptions = {
    scrollwheel: false,
    draggable: false,
    disableDefaultUI: true,
    center: new google.maps.LatLng(lat, centerLon),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //Bind map to elemet with id map-canvas
  var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat, lon),
    title: 'XXX'
  });

  var infowindowW = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindowW.open(map, marker);
  });

  infowindowW.open(map, marker);

  var myOptions2 = {
    scrollwheel: true,
    draggable: true,
    disableDefaultUI: false,
    center: new google.maps.LatLng(66.6846, -67.21511),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions2);
  var i;
  for (i = 0; i < locations.length; i++) {
    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map2,
      title: locations[i][0]
    });

    var infowindow2 = new google.maps.InfoWindow({
      content: locations[i][0]
    });

    google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
      return function() {
        infowindow2.setContent(locations[i][0]);
        infowindow2.open(map2, marker2);
      };
    })(marker2, i));
  }
}
google.maps.event.addDomListener(window, 'load', initializeMap);

＆＃13;

html,
body,
#map-canvas,
#map-canvas-net {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map-canvas-net" style="border: 2px solid #3872ac;"></div>

＆＃13;

＆＃13;

＆＃13;