Google Maps API 3

我有3个标记..我可以加载example1.html到div1点击到marker1？和example2.html到DIV1为MARKER2 ..Google Maps API 3

这里是@ kjy112 http://jsfiddle.net/rD8U6/198/

2012-03-02 zippo

我在做的是在div1中添加一个iframe。随着这一点，我将myPoints数组的第三项替换为您想要的html文件或超链接的名称。（请注意，您可能会遇到x-frame-options下的“显示禁止显示”，我通过google.com获得该显示，但无法将其放入div/iframe中）。它应该在你自己的域中工作。

制作两个（简单）静态htmls，名为static_a.html和static_b.html来测试下面的代码。中间的标记应该去纽约大学的主页。

如果给定每个标记的链接，那么div会从标记的点击监听器中$("#myiframe").attr('src', html);的iframe src中的更改间接更改。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
    html, body { 
     margin:0px; 
     padding:0px; 
     height:100%; 
    } 
    #map_canvas { 
     width:500px; 
     height:100%; 
    } 
    #div1 { 
     background-color:#0FC; 
     width:300px; 
     height:100%; 
     position:absolute; 
     right:0px; 
     top:0px; 
     display:none; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
var map = null; 
var markerArray = []; //create a global array to store markers 
var myPoints = [[43.65654, -79.90138, 'static_a.html'], 
       [43.91892, -78.89231, 'static_b.html'], 
       [43.82589, -79.10040, 'http://www.nyu.edu']]; //create global array to store points 

function initialize() { 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(43.907787, -79.359741), 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    // Add markers to the map 
    // Set up markers based on the number of elements within the myPoints array 
    for(var i=0; i<myPoints.length; i++) { 
     createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]); 
    } 

    //mc.addMarkers(markerArray , true); 
} 

var infowindow = new google.maps.InfoWindow({ 
}); 

function createMarker(latlng, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
     map.panTo(latlng); 
     $("#div1").show(); 
     $("#myiframe").attr('src', html); 

    }); 

    markerArray.push(marker); //push local var marker into global array 
} 
    </script> 
    </head> 
    <body onload="initialize()"> 
<div id="map_canvas"></div> 
<div id="div1"><iframe id="myiframe" style="width: 100%; height: 100%"></iframe> 
</div> 

    </body> 
</html>

来源

2012-03-02 18:25:36

thx伙计..它是一样的使用.load到div或iframe .. – zippo 2012-03-02 19:06:33

但我不明白什么是“ - ”在页面底部，地图:) – zippo 2012-03-02 19:18:01

我认为它出现时，我抓住了jsfiddle代码 – 2012-03-02 19:26:37

我修改演示尝试添加要包括对myPoints阵列中的每个标记的页面，如：

var myPoints = [[43.65654, -79.90138, 'ABC','exemple1.html'],[43.91892, -78.89231, 'DEF','exemple2.html'],[43.82589, -79.10040, 'GHA','mypage.html']]; //create global array to store points

然后，当你循环myPoints：

for(var i=0; i<myPoints.length; i++){ 
    createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2], myPoints[i][3]); 
}

然后在您的createMarker功能：

function createMarker(latlng, html,link) { 
var contentString = html; 
var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    num: link 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 
    map.panTo(latlng); 
    $.get(marker.num, function(data) { 
    $('#div1').html(data); 
    }); 
    $('#div1').show(); 
}); 

markerArray.push(marker); //push local var marker into global array 
}

来源

2012-03-02 15:57:12 Natha

它适合你吗？不是为了我......而是为了快速反应。 – zippo 2012-03-02 16:22:55

我写错了一些东西：$ .get（marker.link，function（data）{instead of $ .get（marker.num，function（data）{ 现在应该工作 – Natha 2012-03-05 08:23:19

Google Maps API 3

回答

相关问题