Google написал некоторый код, чтобы помочь с этим. Вот несколько примеров: Пример использования InfoBubble , Стилированные маркеры и Пользовательское окно информации (с использованием OverlayView).
Код в ссылках выше использует разные маршруты для достижения похожих результатов. Суть его в том, что нелегко напрямую стилизовать InfoWindows, и может быть проще использовать дополнительный класс InfoBubble вместо InfoWindow или переопределить GOverlay. Другим вариантом будет изменение элементов InfoWindow с использованием javascript (или jQuery), как предложено позднее ATOzTOA.
Возможно, самый простой из этих примеров - это использование InfoBubble вместо InfoWindow. InfoBubble доступен путем импорта этого файла (который вы должны разместить самостоятельно): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js
Страница проекта Github InfoBubble .
InfoBubble очень стилевый, по сравнению с InfoWindow:
infoBubble = new InfoBubble({
map: map,
content: '<div class="mylabel">The label</div>',
position: new google.maps.LatLng(-32.0, 149.0),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'transparent',
arrowStyle: 2
});
infoBubble.open();
Вы также можете вызвать его с заданной картой и маркером, чтобы открыть:
infoBubble.open(map, marker);
В качестве другого примера, пользовательский пример информационного окна расширяет класс GOverlay из API Карт Google и использует его в качестве основы для создания более гибкого информационного окна. Сначала создается класс:
/* An InfoBox is like an info window, but it displays
* under the marker, opens quicker, and has flexible styling.
* @param {GLatLng} latlng Point to place bar at
* @param {Map} map The map on which to display this InfoBox.
* @param {Object} opts Passes configuration options - content,
* offsetVertical, offsetHorizontal, className, height, width
*/
function InfoBox(opts) {
google.maps.OverlayView.call(this);
this.latlng_ = opts.latlng;
this.map_ = opts.map;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 0;
this.height_ = 165;
this.width_ = 266;
var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function() {
return me.panMap.apply(me);
});
// Once the properties of this OverlayView are initialized, set its map so
// that we can display it. This will trigger calls to panes_changed and
// draw.
this.setMap(this.map_);
}
, после чего он переопределяет GOverlay:
InfoBox.prototype = new google.maps.OverlayView();
Затем вы должны переопределить нужные вам методы: createElement, draw, remove и panMap. Это довольно сложно, но в теории вы теперь просто рисуете div на карте вместо обычного информационного окна.