Маленькое информационное окно Google Maps - меньше 200 пикселей

Question

У меня есть map_canvas шириной 225.

Я хочу, чтобы мой информационный блок был меньше этого (например, 150 пикселей).

Возможно ли это?Я пробовал maxWidth и добавлял стили, но ничего не получалось.

Экран (на imgshack) можно найти ниже: alt text http://img121.imageshack.us/img121/8317/gmaps.png

Кроме того, я использую Google v3Карты

Javascript:

var results_coods;
var map_2;
var marker_2;
var infowindow_2;

function call_gmap()
{
if($('#map_text').attr('lat')){

    var lat = Number($('#map_text').attr('lat').replace(",","."));
    var lng = Number($('#map_text').attr('long').replace(",","."));
    initialize(lat,lng);
    /*
    var lat= '51.0153389';
    var lng = '2.7253832';  
    */

}
}

function initialize(lat,lng) {

    var latlng = new google.maps.LatLng(lat,lng);
    var myOptions = {
        zoom: 13,
        center: latlng,
        disableDefaultUI: true,
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        draggable: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var infowindow = new google.maps.InfoWindow({
    content: $('#map_text').html(),
    maxWidth: 150
});

var image = 'beachflag.png';
var marker = new google.maps.Marker({
    position: latlng, 
    map: map
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
   infowindow.open(map,marker);

}); 
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

}



function GcodeAddress() 
{
    var map;
    geocoder = new google.maps.Geocoder();
    var address = $('#map_address').html();

     if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 13,
                center: results[0].geometry.location,
                navigationControl: false,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

              var infowindow = new google.maps.InfoWindow({
              content: $('#map_text').html()
              });

             map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            results_coods = results[0].geometry.location;
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
            });
            infowindow.open(map,marker);
            google.maps.event.addListener(
            marker, 'click', function() {
                infowindow.open(map,marker);
            }); 

            google.maps.event.trigger(map, 'resize');

            marker_2 = marker;
            map_2 = map;
           infowindow_2 = infowindow;
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }


}
function resizeMap()
{
    //hiervan komt 1 error, de andere van infowindow
    google.maps.event.trigger(map_2, 'resize');
    map_2.setCenter(results_coods);
    infowindow_2.open(map_2,marker_2);
}

Javascript, нижняя часть HTML-страницы: $ (документ) .ready (function ($) {GcodeAddress (); resizeMap ();});

HTML (VB.Net):

    '-- Google Map

    g_map_text.Text = "<div id=""map_canvas"" style=""width: 225px; height: 225px;       position: relative;"" /></div>" & vbCrLf
    g_map_text.Text &= String.Format("<div id='map_text'      style=""display:none;width:150px;"">{0}</div>", LoadKantoor)
    g_map_text.Text &= String.Format("<div id='map_address' style='display:none;'      >{0}</div>", Bedrijf.Bedrijf("postalcode") & " " & Bedrijf.Bedrijf("city") & "," &      Bedrijf.Bedrijf("address"))

Answer 1

Более простой подход - стилизовать с помощью CSS. Вам нужно обернуть содержимое infoWindow в div с вашим собственным CSS.

Javascript:

marker.openInfoWindowHtml('<div class="iwContainer">' + yourContent + '</div>'); 

CSS:

.iwContainer { 
  width: 300px; 
  height: 200px; 
} 

Вы устанавливаете maxWidth для информационного окна до вызова, чтобы открыть, как описано здесь

EDIT:

Я посмотрел на это снова, и это выглядит хорошо. Я не понимаю, почему это не работает.

Вместо этого вы можете использовать InfoBox.js?

Справочник по API: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / docs / reference.html

Скачать JS: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / src /

Примеры: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / examples /

Дайте мне знать, как вы поживаете.

Answer 2

Может быть, вы заинтересованы в использовании этой инфопузырь:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

, вы можете применить к ней CSS и легко настроить на примере