使用Google Maps API造型InfoWindow

我目前正在使用Google地圖，現在一切正常。但是我想改變InfoWindow的樣式。我一直在研究，但還沒有找到任何有用的東西，幫助我理解InfoWindow（甚至不是API文檔）。使用Google Maps API造型InfoWindow

所以;如何更改我的地圖中InfoWindow框的顏色，背景，邊框等樣式？

在此先感謝。

繼承人我的代碼：

<!DOCTYPE html> 
<head> 
    <title>Google Maps Example</title> 
    <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;} 
     #map_canvas { height: 100% } 
     .InfoWindow { 
     background: #000; 
     } 
    </style> 
</head> 
<body> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var infowindow = null; 
    $(document).ready(function() { initialize(); }); 

    function initialize() { 

     var centerMap = new google.maps.LatLng(59.9149, 10.72974); 

     var myOptions = { 
      zoom: 14, 
      center: centerMap, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

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

     setMarkers(map, sites); 
     infowindow = new google.maps.InfoWindow({ 
       content: "loading..." 
      }); 
    } 


    var sites = [ 
    ['Mount Evans', 59.934615,10.743392, 4, '<div class="InfoWindow"><b>This is Mount Evans.</b></div>'], 
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'], 
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'], 
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.'] 
    ]; 

    var image = new google.maps.MarkerImage(
     'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png', 
     new google.maps.Size(30,37) 
    ); 

    function setMarkers(map, markers) { 

     for (var i = 0; i < markers.length; i++) { 
      var sites = markers[i]; 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       title: sites[0], 
       zIndex: sites[3], 
       html: sites[4], 
       icon: image 

      }); 

      var contentString = "Some content"; 

      google.maps.event.addListener(marker, "click", function() { 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
</script> 
</head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

編輯：它看起來並不像它的可能的信息窗口風格（只是輸入）。但是，信息框使這成爲可能。

來源

2013-02-28 sjarmenitt

您可能需要訪問[鏈接]（http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow） – Ankit 2013-02-28 17:07:20

@Ankit謝謝。 – sjarmenitt 2013-02-28 17:34:42

您也可以使用[** InfoBubble **]（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html）執行此操作（同一站點）。 – johntrepreneur 2013-03-14 23:19:16

-2

從API：https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

的信息窗口的內容可以是文本字符串，一片斷的HTML或DOM元素本身。

您可以傳入樣式化的HTML，或者您可以創建InfoWindow本身，然後將其作爲對象在JS中拉出。

來源

2013-02-28 17:05:41

+13

這似乎沒有以任何方式解決OP帶來的問題。這裏的問題在於設計由google生成的infowindow部分，而不是你在其中放置的內容，OP已經知道如何設計樣式。無論你傳遞什麼內容，問題都不會改變。或者我錯過了什麼？ – matteo 2013-08-04 19:53:42

您可以用Java腳本更改如下

var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=\"navigat:"You feild"\"><input type=\"submit\"/ style=\"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;\" value=\"More Info\" ></form></div></div>'; 

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

來源

2013-09-16 05:38:40

難道你最好使用類名和樣式表嗎？ – 2016-05-09 08:18:06

@ToniMichelCaubet它可能需要更多的代碼，所以更好地保持它簡短 – 2016-05-09 09:51:20

代碼的長度不重要，可讀性確實，麪糰.. – 2016-05-09 12:26:21

使用.gm式.gm式-IW類造型的文字，例如：

.gm-style .gm-style-iw { 
    font-size: 16px; 
    font-weight: bold; 
    font-family: sans-serif; 
    text-transform: uppercase; 
}

來源

2016-02-17 18:44:41

使用Google Maps API造型InfoWindow

回答

相關問題