Multiple Google Maps won't display on single page

问题

I have read many different posts about getting multiple Google maps to display on a single page, but none seem to related to my code, which uses the Google Maps API V3.

I have 2 Google Maps on the same page, but in different tabs. I have duplicated the code for Map1 and pasted it into a 2nd tab to create Map2. I have then changed the "var map" and "map_canvas" id's for Map2, but when published, only Map2 displays on the page.

I tried the option of deleting the lines;

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

from the 2nd tab so that it wasn't repeated on the same page, but that didn't work.

The page can be viewed here: http://tcchurch.com.au/table1/index.php/missions

The 2 different maps are supposed to display under the tabs "Our Missionaries" and "International Partners".

Any help would be very appreciated. Thanks.

Ian

回答1:

You have duplicate functions. That won't work, give them unique names as well, or have one initialize function that initializes both maps.

function initialize() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
....
}

function initialize2() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), settings);
...
}

回答2:

Not only give different names to functions but also to global variables - variables without "var" at the begging:

Assigning post id to: "map", "initialize" and "codeAddress" like this (not super clean but works):

var geocoder;
    var map;

    function codeAddress<? echo $post['Post']['id']; ?>() {
      var address = "<? echo h($post['Post']['address']); ?>, <? echo h($post['Post']['ZIP']); ?> <? echo $cities[$post['Post']['city_id']]; ?>";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map<? echo $post['Post']['id']; ?>.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map<? echo $post['Post']['id']; ?>,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

    function initialize<? echo $post['Post']['id']; ?>() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
        zoom: 14,
        center: latlng
      }
      map<? echo $post['Post']['id']; ?> = new google.maps.Map($('googleMap<? echo $post["Post"]["id"]; ?>'), mapOptions);
      codeAddress<? echo $post['Post']['id']; ?>()
    }   

    google.maps.event.addDomListener(window, 'load', initialize<? echo $post['Post']['id']; ?>);

来源：https://stackoverflow.com/questions/16578425/multiple-google-maps-wont-display-on-single-page

标签

google-maps

google-maps-api-3