最大化infowindow與谷歌地圖api v3

與谷歌地圖API v2我們可以通過指定maxTitle屬性最大化infowindow。任何人都可以告訴我，我們如何最大限度地利用谷歌地圖API的v3 infowindow。最大化infowindow與谷歌地圖api v3

感謝

2010-10-16 Peacemoon

我不認爲有尚未在3版本的官方途徑，最大限度谷歌地圖信息窗口as you could with version 2。

但是，您可以實現類似的功能，請參閱下面的代碼。我很抱歉，我的示例代碼不是非常通用的 - 如果您需要多個標記，則需要重新編寫我的代碼以使用數組或對象文字或其他東西。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var contentString1 = 
    "<a onclick=\"expand();\">+ Expand</a>"; 

    var contentString2 = 
    "<div>" + 
    "<a onclick=\"collapse();\">- Collapse</a>" + 
    "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat lacinia mi, sit amet aliquam sem interdum a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sed accumsan augue. Vivamus egestas nibh vel nulla mattis ut pulvinar tortor interdum. Quisque scelerisque, urna non vehicula porta, mi leo pellentesque arcu, non ullamcorper metus quam quis diam. Etiam quis nisl id tellus dictum semper at non mi. Praesent vel justo sed nisl cursus accumsan eu eget sem. Donec id lacus augue, nec vehicula metus. Maecenas varius ligula et orci mattis rhoncus. In interdum neque eu libero lobortis ac tristique metus fermentum. In eu turpis sit amet augue laoreet imperdiet.</p>" + 
    "<p>Fusce molestie, nulla sit amet condimentum facilisis, augue elit tincidunt nisl, sit amet fermentum tellus tortor non sem. Etiam turpis lectus, fermentum ut congue vitae, gravida eget magna. Sed tristique, lacus a tincidunt faucibus, augue nulla aliquet ipsum, sagittis imperdiet nunc elit ac massa. Aliquam rutrum, urna quis accumsan suscipit, lectus massa rutrum velit, eget dignissim nisl orci a risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec faucibus semper metus sit amet adipiscing. Donec consequat, est quis lacinia porta, eros magna tempor orci, ac suscipit sem justo vel enim. Suspendisse mauris nulla, pulvinar ac placerat vel, dignissim in tortor. Nunc arcu sapien, placerat id scelerisque porta, placerat vel neque. Morbi ut magna at risus varius interdum vitae ut lectus. Maecenas luctus rutrum augue. Phasellus facilisis, dui at ornare faucibus, mi magna iaculis nunc, in faucibus diam turpis vel sapien. Duis ac orci augue, vitae vehicula mauris. Curabitur sodales sem in lectus euismod tempus.</p>" + 
    "<p>Suspendisse sagittis consectetur velit ut vulputate. Nullam ante odio, posuere sit amet dignissim vel, mollis eget nunc. Quisque fringilla tempus rutrum. Aenean hendrerit blandit ipsum, a blandit est volutpat sed. Etiam auctor erat ac nulla pellentesque vestibulum. Pellentesque congue justo ac massa aliquam vitae convallis velit condimentum. Ut aliquam posuere feugiat. In convallis vulputate tortor, nec ultrices enim ultrices non. Donec laoreet nibh at quam varius gravida. Donec massa nibh, cursus vel blandit sit amet, ultrices et turpis. Pellentesque adipiscing porta lorem, sit amet mollis augue posuere et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget tortor mauris. Praesent eu pulvinar tortor. Proin eleifend interdum massa, at ultrices ligula viverra a. In auctor velit lorem. Quisque et massa quis lacus cursus fringilla. Maecenas ut convallis lectus. In ac erat vestibulum enim porttitor scelerisque in quis lacus. Cras quis diam mauris. </p>" + 
    "</div>"; 

    var infowindow; 
    var map; 
    var marker; 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
     zoom: 4, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


    infowindow = new google.maps.InfoWindow({ 
     content: contentString1 
    }); 

    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Test' 
    }); 

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

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


    } 

    function expand(){ 
    infowindow.close(); 
    infowindow.setContent(contentString2); 
    infowindow.open(map, marker); 
    } 

    function collapse(){ 
    infowindow.setContent(contentString1); 
    } 

</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"></div> 
</body> 

</html>

我希望這有助於！

來源

2011-01-05 12:26:34

非常有幫助。 :) – murvinlai 2011-01-05 22:38:59

Apparently this guy知道如何做到這一點，但他不會告訴：P

編輯

柯克嗨，

它在我的book 146-150頁上介紹。

感謝您的閱讀！

最好的問候，加布裏埃爾Svennerberg
- -
什麼頁面你V3的書每提到你在這裏http://see.weareinto.com/3syJ你參考MapBlowup？

來源

2011-01-05 22:24:44

該示例使用Google Maps API版本2. – 2011-01-05 22:41:30

是的，我瀏覽了Google Books上的第7章，但沒有看到任何提及。 http://books.google.com/books?id=gHb8m0GSV2MC&printsec=frontcover&dq=Beginning+Google+Maps+API+3&hl=en&ei=WPokTZWTCM6ahQeFjJXJAg&sa=X&oi=book_result&ct=result&resnum=1&ved=0CCkQ6AEwAA#v=onepage&q&f=false – 2011-01-05 23:11:09

什麼想要[第131頁]（http://books.google.com/books?id=gHb8m0GSV2MC&lpg=PP1&dq=Beginning%20Google%20Maps%20API%203&pg=PA134#v=onepage&q&f=false） – 2011-01-06 13:03:30

最大化infowindow與谷歌地圖api v3

回答

相關問題