Problems with display map.

[galievruslan]

<div id="map2" style='width: 800px; height: 500px;'></div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
          handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });
          handler.buildMap({ provider: {}, internal: {id: 'map2'}}, function(){
            markers = handler.addMarkers(<%=raw @locations.to_json %>);
            handler.bounds.extendWith(markers);
            handler.fitMapToBounds();
          });
        });
    </script>

If anyone other than div id 'map' the map is displayed with glitches(Zoom slider in picture).If div id = 'map' all perfectly displayed.

[apneadiving]

this is a css issue. Look at your styles, I cant solve this since its not related to the gem but to google maps.

[barnett]

@galievruslan how did you fix this? I am having the same problem.

[galievruslan]

apneadiving rightly said there was a problem in the css styles. All rechecked and found the problem. Here is my code: CSS:

.map_container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;  
}
/* For google maps and twitter bootstrap*/
#map img {max-width: none;}
#map label {width: auto; display:inline;}

HTML:

<div class="map_container" style='width: 800px; height: 500px;'>
  <div id="map" style='width: 800px; height: 500px;'></div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function() {
    handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @locations.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(12);
    });
});
</script>

[kashifnaseer]

+1 - awesome - worked for me too.

[nicubarbaros]

Thank you! galievruslan