21

私は現在Googleマップを使用していますが、今ではすべてが正常に機能しています。しかし、インフォウィンドウのスタイルを変更したいと思います。私は調査を行ってきましたが、InfoWindow(APIドキュメントでさえも)を理解するのに役立つものはまだ見つかりませんでした。

それで; マップの情報ウィンドウボックスの色、背景、境界線などのスタイルを変更するにはどうすればよいですか?

前もって感謝します。

これが私のコードです:

<!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>

編集:インフォウィンドウのスタイルを設定することはできないようです(入力のみ)。ただし、Infoboxはこれを可能にします。

4

3 に答える 3

10

テキストのスタイル設定には .gm-style .gm-style-iw クラスを使用します。例:

.gm-style .gm-style-iw {
   font-size: 16px;
   font-weight: bold;
   font-family: sans-serif;
   text-transform: uppercase;
}
于 2016-02-17T18:44:41.387 に答える
5

以下のように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-16T05:38:40.473 に答える
-3

API から: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

InfoWindow のコンテンツには、テキストの文字列、HTML のスニペット、または DOM 要素自体のいずれかを含めることができます。

スタイル付きの HTML を渡すか、InfoWindow 自体を作成してから、オブジェクトとして JS にプルすることができます。

于 2013-02-28T17:05:41.013 に答える