Menu
I'm currently working with Google Maps, and everything works fine by now. But I want to change the styling of the InfoWindow. I have been researching, but haven't find anything useful yet to help me understand InfoWindow (not even the API Documentation.)
So; how do I change the styling like colors, background, borders and etc. of the InfoWindow box in my map?
Thanks in advance.
Heres my code:
<!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: It does not look like it's possible to style InfoWindow (just the input). However, Infobox makes this possible.
888
An InfoWindow can be placed on a map at a particular position or above a marker, depending on what is specified in the options. Unless auto-pan is disabled, an InfoWindow will pan the map to make itself visible when it is opened. After constructing an InfoWindow, you must call open to display it on the map.
Call setPosition() on the info window, or. Attach the info window to a new marker using the InfoWindow. open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
use .gm-style .gm-style-iw classes for styling the text for example:
.gm-style .gm-style-iw {
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
