一个页面上有多个标记的多个谷歌地图

Multple Google Maps with Multiple Markers on one page.

本文关键字:谷歌地图 一个      更新时间:2023-09-26

我试图用google maps API V3在一个页面上放置两个带有多个不同位置标记的google地图。我已经走了这么远:

  jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
    var map,map2,mapOptions,mapOptions2,markers,markers2,infoWindowContent,infoWindowContent2;
    var bounds = new google.maps.LatLngBounds();
    var bounds2 = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
        scrollwheel: false,
        styles:[
  {
    "stylers": [
      { "saturation": -100 }
    ]
  }
],
    };
   var mapOptions2 = {
        mapTypeId: 'roadmap',
        scrollwheel: false,
        styles:[
  {
    "stylers": [
      { "saturation": -100 }
    ]
  }
],
    };
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("google-maps"), mapOptions);
    map2 = new google.maps.Map(document.getElementById("locations-google"), mapOptions2);
    map.setTilt(45);
    map2.setTilt(45);
    // Multiple Markers
    var markers = [
        ['TITLE HERE', 1,1],
        ['TITLE HERE', 1,1]
    ];
    var markers2 = [
        ['TITLE HERE', 1,1],
        ['TITLE HERE', 1,1]
    ];


        var infoWindowContent = [
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here'  +     
           '</div>'],
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here' +
        '</div>']
    ]; 
        var infoWindowContent2 = [
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here'  +     
           '</div>'],
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here' +
        '</div>']
    ];        
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    var infoWindow2 = new google.maps.InfoWindow(), marker2, i;
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
             marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: "<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png"
        });
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    for( i = 0; i < markers2.length; i++ ) {
        var position2 = new google.maps.LatLng(markers2[i][1], markers2[i][2]);
        bounds2.extend(position2);
        marker2 = new google.maps.Marker({
            position: position2,
            map: map2,
            title: markers2[i][0],
            icon: "<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png"
        });
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
            return function() {
                infoWindow.setContent(infoWindowContent2[i][0]);
                infoWindow.open(map2, marker2);
            }
        })(marker2, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds2);
    }
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(8);
        google.maps.event.removeListener(boundsListener);
    });
    }

但当我运行这个时,第一个映射会很好地工作,并显示正确的位置数量等。但当它涉及到第二个时,它不会加载,并在控制台中给我这个错误"Uncaught TypeError:无法读取null的属性'lat'"。我很困惑它为什么要这么做,我根本弄不明白。

谢谢!

我建议您在尝试API映射的过度复杂实现之前先阅读文档。

您的代码中存在一些问题,例如未声明的变量等。

您肯定需要修复的一件事是mapOptions:

有两个必需的参数:centerzoom。此外,不能像您那样声明mapTypeId

var mapOptions = {
    center: new google.maps.LatLng(0,0),
    scrollwheel: false,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

试着先解决这个问题,看看它是否会好转。

您两次调用同一Maps实例的fitBounds-方法:map

第二次呼叫:

map.fitBounds(bounds2);

应该是

map2.fitBounds(bounds2);