CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Luke G
Luke G

Reputation: 1747

GMaps InfoWindow display issue

I cannot figure out why the Google Maps InfoWindow does not display properly. Screengrab below:

enter image description here

Any idea what may be causing this?

Here is the code (js):

    /**
  * Basic Map
  */
$(document).ready(function(){
 var map = new GMaps({
    el: '#basic_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 10,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });
map.addMarker({
    lat: 51.5073346,
    lng: -0.1276831,
    title: 'Big Ben',
    infoWindow: {
     content: 'Big Ben is the nickname for the great bell of the clock at the north end of the Palace of Westminster in London, and often extended to refer to the clock and the clock tower, officially named Elizabeth Tower.'
        }
      });   
});

css:

.map {
    display: block;
    width: 95%;
    height: 350px;
    margin: 0 auto;
    -moz-box-shadow: 0px 5px 20px #ccc;
    -webkit-box-shadow: 0px 5px 20px #CCC;
    box-shadow: 0px 5px 20px #CCC;
}

html:

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
   <script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
...
   <div id="basic_map" class="lg-map"></div>

Upvotes: 1

Views: 670

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

The issue is forced by the following format, defined in http://dev.contractorshire.co.uk/assets/components/articles/themes/default/style.css:

img {
    background: #FAFAFA;
    border: 1px solid #DCDCDC;
    padding: 8px;
}

Add this to your CSS to override the background-setting for images inside the map:

#basic_map img{background:none}

Upvotes: 1

Related Questions