Google Maps v3 - how to style the "baloon" and to color a country?

Question

does anybody knows how can style the baloon that appears in the Google Maps v3 when you click a place? I wish to change the default "comic-style".

Second question: is it possible to automatically (or in some other way) color a country (i.e. I wish to have the US with a red overlay, Canada with a yellow overlay and so on)?

Thank you, da

next time - it is better to post 2 separate questions – Tomas Dec 12 '11 at 09:45 — Tomas, Dec 12 '11 at 09:45

score 3 · Accepted Answer · edited May 23 '17 at 10:08

3

As I can see infowindow baloons have inline styles, so, it's a problem to apply styling to them. So, one of alternatives is to create own class for bubbles (or find the one, for example look here: Google Maps: How to create a custom InfoWindow?).

Your second question: there are no simple and generalized way to show overlay like you want. I mean, there is no such API call. But it can be done relatively easily using polygons. (look at How do i Add and Remove polygons on a Google Map (version 3)?), you just need country boundaries, which you can find over the net.

edited May 23 '17 at 10:08

Community

1
1

answered Dec 12 '11 at 09:02

dmitry

4,989
5
48
72

1

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html works fine for me. – Davide Dec 12 '11 at 17:52

score 3 · Answer 2 · answered Dec 12 '11 at 09:17

I have solved the styling problem by toggling custom elements when clicking the markers. I needed to create smaller info windows, so I made a custom element showing up by the marker clicked without the comic style pointer.

google.maps.event.addListener(marker, 'click', function() {
  loadInfoWindow(map, marker);
});

function loadInfoWindow(map, marker){
        clearInfoWindow();
        pixelOffset = getPixelPosInMap(map, marker);
        var iwc = ''; // infowindow markup goes here
        $('#iwContainer').css({'margin-top':(pixelOffset.y - 100), 'margin-left':(pixelOffset.x - 40)}).html(iwc).fadeIn('fast');
    }

function getPixelPosInMap(map, marker){
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        return new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
    }

This code use jQuery to fetch the info window container #iwContainer. I have the following styles for the info window container.

#iwContainer {
  position: absolute;
  display: none;
  background-color: white;
  color: #900;
  font-size: 10px;
  padding: 5px;
  width: 90px;
  border: 1px solid #900;
  border-radius: 5px;
  z-index: 100;
  opacity: 0.85;
}

Google Maps v3 - how to style the "baloon" and to color a country?

2 Answers2