Изменить информационные окна с информационным полем

Есть ли способ изменить информационное окно с информационными окнами, потому что мне нужно больше стилей, чем базовые информационные окна...

КОД И ДЕМО: http://jsbin.com/EVEWOta/26

google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            contentStr += '<br>'+place.types+'</p>';
            if (!!place.photos) contentStr += '<img src=' + place.photos[0].getUrl({ 'maxWidth': 300, 'maxHeight': 300 }) + '></img>';
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          }
        });

    });
    gmarkers.push(marker);

InfoWindows не может стилизовать так, как я хочу, поэтому мне нужно изменить его с помощью информационных окон, но как???


google-maps google-places-api javascript infowindow infobox
person roaddev    schedule 29.08.2013    source источник
comment
Да, напишите код. См.: google-maps-utility- library-v3.googlecode.com/svn/trunk/infobox/ .   -  person StackSlave    schedule 30.08.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вот хороший инструмент для оформления информационных окон: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

И еще несколько ресурсов в этом ответе: Стили Google Maps InfoWindow

Обновление: чтобы разместить информационный пузырь на карте, вы можете реализовать его следующим образом, с любыми параметрами, которые вы хотите ниже.

infoBubble = new InfoBubble({
  map: map,
  content: '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>',
  shadowStyle: 1,
  padding: 8,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 4,
  borderWidth: 5,
  borderColor: '#2c2c2c'
});

google.maps.event.addListener(marker, 'click', function() {
  if (!infoBubble.isOpen()) {
    infoBubble.open(map, marker);
  }
});
person Cole Pilegard    schedule 29.08.2013
comment
как я могу реализовать это в моем примере? - person roaddev; 30.08.2013
comment
Включите в него файл infobubble.js и укажите нужные параметры. Или для информационного окна см. Комментарий, сделанный выше: информационное поле"> stackoverflow.com/questions/18522195/ - person Cole Pilegard; 30.08.2013
comment
хорошо, я включу, но мне тогда нужно изменить infoWindow.setContent и аналогичный код??? - person roaddev; 30.08.2013
comment
добавил пример выше - person Cole Pilegard; 30.08.2013
comment
Следует отметить, что Infobox и Infobubble — это два разных плагина. - person Cammy; 02.01.2014