У меня есть map_canvas с шириной 225.
Я хочу, чтобы мой infobox был меньшим, чем это (например, 150 пкс).
Действительно ли это возможно? Я попробовал maxWidth и добавляющие стили, но ничто, казалось, не работало.
Экран (на imgshack) может быть найден ниже:
Кроме того, я использую v3 Google Maps
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 (функция ($) {GcodeAddress (); resizeMap ();});
HTML (VB.Net):
'-- Google Map
g_map_text.Text = "
Более простой подход - стилизация с использованием CSS. Вам нужно обернуть содержимое infoWindow в div с вашим собственным CSS.
Javascript:
marker.openInfoWindowHtml('<div class="iwContainer">' + yourContent + '</div>');
CSS:
.iwContainer {
width: 300px;
height: 200px;
}
Вы устанавливаете maxWidth для информационного окна перед вызовом для открытия, как описано здесь
РЕДАКТИРОВАТЬ:
Я посмотрел на это снова, и это выглядит отлично. Я не понимаю, почему это не работает.
Вы могли бы вместо этого использовать 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- Утилита-library-v3.googlecode.com/svn/trunk/infobox/examples/
Дайте мне знать, как у вас дела.