在google地圖中創建新的infowindow

如何創建由我們定製的新信息窗口，而不是Google提供的默認窗口。我需要爲我的網站創建和定製一個新的。（不是google.maps.InfoWindow）在google地圖中創建新的infowindow

2013-07-29 Arjun

我用下面的腳本在谷歌地圖創建和自定義新的信息窗口

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
    <script type="text/javascript"> 
    var locations = [ 
     ['chennai', 13.0810, 80.2740, 4], 
     ['madurai', 9.9300, 78.1200, 5], 
     ['coimbatore', 11.0183, 76.9725, 3], 
     ['Trichy', 10.8100, 76.9725, 2], 
     ['vellore', 12.9202, 79.1333, 1] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(13.0810, 80.2740), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
var info = '<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"> For more Details <a href="smaatapps.com/citycaching/"><img src="images/i.png" width="46" height="45">' + '</div>'; 

    var marker, i; 
var icon='images/'; 
    for (i = 0; i < locations.length; i++) { 

    var marker = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     icon: 'images/pin.png', 
     visible: true 
    }); 


    var boxText = document.createElement("div"); 
    boxText.style.cssText = "background-image:url(images/popup.png); width:346px; height:183px;"; 
    boxText.innerHTML = "<p style='padding-left:40px; position:relative;top:20px;color:white; v-align:center;'><table style='color:white;padding-top:60px'><tr><td><img src='images/i.png' width='46' height='45'></td><td><a href='http://smaatapps.com/citycaching/overview.php'>For More Information</a></td></tr></table></p>"; 


     var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-10, 0) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('popup.png') no-repeat" 
      ,width: "346px" 
     } 
     ,closeBoxMargin: "22px 29px 2px 2px" 
     ,closeBoxURL: "images/close.png" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
    }; 




    var ib = new InfoBox(myOptions); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     ib.setContent('<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"><p style="padding-top:40px;color:white; padding-left:40px;">' + locations[i][0] + '</p><p style="padding-left:40px; position:relative;top:20px;color:white; v-align:center;"><a href="http://smaatapps.com/citycaching/overview.php?id=' + locations[i][3] + '"><table style="color:white;"><tr><td><img src="images/i.png" width="46" height="45"></td><td>For More Information</td></tr></table></p>' + '</div>'); 
    ib.open(map, marker); 
    } 
    })(marker, i)); 





    } 
    </script>

來源

2013-07-30 06:40:13 Arjun

您可以使用InfoBox。它基本上擴展了infoWindow類，允許更多的自定義和樣式。

訪問此鏈接爲infoBOx。

在信息窗口的情況下，你可以這樣做：

var infoWindow = new google.maps.InfoWindow({ 
     content: '<div id="content">'+Content+ 
     '</div>' 
     });

只要你喜歡你可以樣式。

來源

2013-07-29 05:09:12

如果您不想使用Google的默認InfoWindow，請查看InfoBubble。

infobubble.js是一個單獨的文件，非常簡單和容易編輯他們的風格。

供參考：這有一個廣泛的支持，所以你甚至可以問這裏的問題標記爲infobubble，如果你有任何問題。

更好的是不要重新發明輪子，它會消耗大量的時間。但是如果你想學習，你可以嘗試一下。

來源

2013-07-29 05:10:00 Praveen

請閱讀this article它會更有幫助。

你剛剛實現這個使用InfoBox類提供的谷歌，你可以find here。它基本上擴展了類，允許更多的定製和樣式。

Futher詳情閱讀本links和links

來源

2013-07-29 05:22:48

在google地圖中創建新的infowindow

回答

相關問題