Styling InfoWindow с API Карт Google

В настоящее время я работаю с Google Maps, и все работает отлично. Но я хочу изменить стиль InfoWindow. Я изучал, но еще не нашел ничего полезного, чтобы помочь мне понять InfoWindow (даже документацию по API).Styling InfoWindow с API Карт Google

So; как изменить стиль, например, цвета, фон, границы и т. д. окна InfoWindow на моей карте?

Заранее спасибо.

Heres мой код:

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

Edit: Это не выглядит, как это можно стилизовать InfoWindow (только вход). Тем не менее, Infobox делает это возможным.

источник

2013-02-28 sjarmenitt

Вы можете посетить [Ссылка] (http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow) – Ankit

@Ankit Спасибо. – sjarmenitt

вы также можете сделать это с помощью [** InfoBubble **] (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html) тоже (тот же сайт). – johntrepreneur

-2

Из API: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

Содержание информационного окна может содержать либо строку текста, а фрагмент HTML, или сам DOM элемент.

Вы можете перейти в стиле HTML или создать сам InfoWindow, а затем потянуть его в JS как объект.

источник

2013-02-28 17:05:41

+13

Это, по-видимому, не затрагивает проблему, вызванную ОП. Проблема здесь заключается в разработке части информационного окна, которое генерируется Google, а не содержимого, которое вы в него вставляете, которое OP уже знает, как стилизовать. И что бы вы ни передали в качестве контента, проблема не меняется. Или я чего-то не хватает? – matteo

Вы можете изменить его с помощью Java Script, как показано ниже

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

Не лучше ли использовать имена классов и таблицу стилей? –

@ToniMichelCaubet Может потребоваться больше кода, поэтому лучше держать его коротким –

Длина кода не важна, читаемость делает, тесто .. –

использование .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

Styling InfoWindow с API Карт Google

ответ

Смежные вопросы