Google मानचित्र API

के साथ स्टाइलिंग इन्फोविंडो मैं वर्तमान में Google मानचित्र के साथ काम कर रहा हूं, और अब तक सब कुछ ठीक काम करता है। लेकिन मैं InfoWindow की स्टाइल बदलना चाहता हूं। मैं शोध कर रहा हूं, लेकिन मुझे अभी तक कुछ भी उपयोगी नहीं मिला है, जो मुझे इन्फविंडो (यहां तक कि एपीआई दस्तावेज़ीकरण भी नहीं।)Google मानचित्र API

तो; मैं अपने मानचित्र में 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>

संपादित करें: यह नहीं दिखता है जैसे कि यह (बस इनपुट) InfoWindow शैली करना संभव है। हालांकि, इन्फोबॉक्स इसे संभव बनाता है।

स्रोत

2013-02-28 sjarmenitt

आप यात्रा कर सकते हैं [लिंक] (http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow) – Ankit

@ एंकिट धन्यवाद। – sjarmenitt

आप इसे [** इन्फोबबल **] (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html) के साथ भी कर सकते हैं (उसी साइट पर)। – johntrepreneur

-2

एपीआई से: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

InfoWindow की सामग्री या तो पाठ की एक स्ट्रिंग, HTML के एक टुकड़ा है, या एक डोम तत्व में ही हो सकती है।

आप स्टाइल एचटीएमएल में पास कर सकते हैं या आप इन्फोविंडो स्वयं बना सकते हैं, फिर इसे जेएस में ऑब्जेक्ट के रूप में खींचें।

स्रोत

2013-02-28 17:05:41

+13

यह किसी भी तरह से ओपी द्वारा उत्पन्न समस्या का समाधान नहीं करता है। यहां समस्या इन्फॉइंडो के हिस्से को स्टाइल कर रही है जो Google द्वारा उत्पन्न की गई है, न कि आपके द्वारा डाली गई सामग्री, जिसे ओपी पहले से ही शैली के बारे में जानता है। और जो कुछ भी आप सामग्री के रूप में पास करते हैं, समस्या बदलती नहीं है। या क्या मैं कुछ न कुछ भूल रहा हूं? – matteo

उदाहरण के लिए आप पाठ स्टाइलिंग के लिए

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

Google मानचित्र API

उत्तर

संबंधित मुद्दे