开发者

Why is a scroll bar coming out in my maps infowindow in chrome?

开发者 https://www.devze.com 2023-04-12 21:16 出处:网络
Here is the JavaScript: $(document).ready(function(){ //set location of san antonio var san_antonio = new google.maps.LatLng(29.4, -98.544);

Here is the JavaScript:

$(document).ready(function(){

//set location of san antonio 
var san_antonio = new google.maps.LatLng(29.4, -98.544);

//set infowindow
var infoWindow;

//object literal containing the properties
var options = {
  zoom: 9,
  center: san_antonio,
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}

//create the map
var map = new google.maps.Map(document.getElementById开发者_如何转开发('map'), options);

//create marker
var marker = new google.maps.Marker({
  position: san_antonio,
  map:map,
  title: "san antonio"
});


//add 'click' event listener
google.maps.event.addListener(marker, 'click', function(){

//creates infowindow if it already doesn't exist
if (!infoWindow){
  infoWindow = new google.maps.InfoWindow();
}

//create content for infowindow
var content = '<div id="information">'+'<img src="http://a1.twimg.com/profile_images/1549555880/Screenshot.png"/>'+'</div>'

//set content of the infowindow. 
infoWindow.setContent(content);

//open infowindow on click of marker 
infoWindow.open(map,marker);

//ends the event listener
}); 


//ends the DOM loader
});

In chrome i get an unwanted scroll bar in the infowindow when it pops up. If you look at the bottom right corner you will notice that there is a little bit of distortion as well.

In Chrome

Why is a scroll bar coming out in my maps infowindow in chrome?

The infowindow looks great in Firefox. I was not having this problem last night when I was working on my desktop, so I am thinking that my chrome installation may be broken on my laptop. What do you think? Here is what it looks like in FireFox:

In FireFox

Why is a scroll bar coming out in my maps infowindow in chrome?

I tried doing div#information{overflow:hidden}, but nothing changed I then tried doing div#information{overflow:hidden;height:500px;background-color:green;}, and then the scroll bar just got longer. This is telling me that the infowindow is acting as its own div and that the 'information' div's height is causing the infowindow's scroll bar to get larger.

Why is a scroll bar coming out in my maps infowindow in chrome?



Try adding this css style:

div#information{
    overflow: hidden;
}


.gm-style-iw{ overflow: hidden !important;}

it works for me


may be an issue with line-height. that's what was causing the error for me. see Google Maps API v3: InfoWindow not sizing correctly answer #11125793 (Nick).


This solution worked for me:

line-height:1.35;
overflow:hidden;
white-space:nowrap;
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号