Petit Google Maps Infowindow - plus Petit que 200px
J'ai un map_canvas avec une largeur de 225.
Je veux que mon infobox à être plus petite (par exemple. 150 px).
Est-ce possible? J'ai essayé maxWidth et ajouter des styles, mais rien ne semblait fonctionner.
Un écran (sur imgshack) peut être trouvé ci-dessous: le texte d'alt http://img121.imageshack.us/img121/8317/gmaps.png
Aussi,
J'utilise la v3 de 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, en bas de page html:
$(document).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"))
OriginalL'auteur NicoJuicy | 2010-06-29
Vous devez vous connecter pour publier un commentaire.
Une approche plus facile est de style à l'aide de CSS. Vous avez besoin d'envelopper le contenu de la bulle informative dans un div avec votre CSS personnalisé.
Javascript:
CSS:
Vous êtes réglage de la maxWidth pour l'infowindow avant l'appel à ouvrir comme décrit ici
EDIT:
J'ai regardé à nouveau et il a l'air bien. Je ne comprends pas pourquoi cela ne fonctionne pas.
Vous pouvez utiliser InfoBox.js au lieu de cela?
De Référence de l'API: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Téléchargement JS: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/
Exemples: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/
Laissez-moi savoir comment vous vous y prenez.
avez-vous essayé la deuxième approche?
Oui, Dans jQuery-je ajouter $('#map_text') comme l'infowindow contexte. Ensuite, j'ai eu <div id="map_text" style="width:250px;">contentforinfowindow</div>
si les 3 options que j'ai fournis ne fonctionnent pas pour vous, vous êtes en mesure de publier votre code?
Je voudrais utiliser la valeur par défaut infowindows 🙁 Même si, vous avez raison. stackoverflow.com/questions/2703210/... (pour plus d'informations) que je devrais essayer de l'infobox alors 🙁 Merci quand même!!
OriginalL'auteur codingbadger
Peut-être vous intéressés par l'utilisation de cette infobubble:
vous pouvez appliquer le style css sur ce et facile à personnalisé avec l'exemple
OriginalL'auteur syant