在点击活动中加载Google地图地图

时间:2015-05-17 12:32:44

标签: javascript jquery google-maps

如果我有以下代码来初始化google map onload

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>        
    function initialize() {
        var lat = 45.430817;
        var lon = 12.331516;

        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
            center: new google.maps.LatLng(lat, lon),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });        
</script>

如何修改此功能以仅在特定事件中加载此地图 (点击带有id = tab-link的标签页)

<li id="tab-link">Show map </li>

1 个答案:

答案 0 :(得分:2)

var myCenter=new google.maps.LatLng(45.430817,  12.331516);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false

  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};



$(document).ready(function(){

            $('#tab-link').bind('click', function() {
                initialize()
            });
          });