1

I am using bootstrap for layout and i am trying to center my map to a marker, but the problem is that the marker shows up at the bottom of the map container. If i slightly resize the window then it centers itself and work normally.

my mark up

<div id="gMap">
  <div id="map-canvas"></div>
</div><!--gMap-->

css

#map-canvas {
 position: relative;
 padding-bottom: 70%; 

}

#map-canvas iframe {
 width: 100% !important;
 height: 100% !important;
}

js

var respMap;
var mapCanvas = document.getElementById('map-canvas');

function mymapini() {
 var mapPos = new google.maps.LatLng(43.724243, -79.634353); //Set the coordinates
 var mapOpts = {
 zoom: 16, 
 disableDefaultUI: true,
 center: mapPos, 
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

respMap = new google.maps.Map(mapCanvas,
mapOpts);

var mapMarker = new google.maps.Marker({
 position: mapPos,
 map: respMap,
 title: 'Test marker'
 });


 google.maps.event.addListener(respMap, 'idle', function() {
  window.setTimeout(function() {
 respMap.panTo(mapMarker.getPosition());
 }, 250);    
});

}

if(mapCanvas != null){

 google.maps.event.addDomListener(window, 'load', mymapini);


}
Creatix
  • 91
  • 11
  • If you use percentage sizing, the parent div (gMap) needs to have a size. – geocodezip Aug 01 '14 at 11:49
  • i tried gMap width 100% and height 600px but result is same :( – Creatix Aug 01 '14 at 12:09
  • That doesn't define a size for gMap (unless it's parents are completely defined/have a fixed size), you need to go all the way up to "html". See [this page from Mike Williams' v2 tutorial](http://econym.org.uk/gmap/basic19.htm) – geocodezip Aug 01 '14 at 12:50
  • thank you for the reply, fixed this by this css #map-canvas { position: relative; padding-bottom: 70%; overflow: hidden; padding-top: 30px; height: 0; } #map-canvas iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } – Creatix Aug 01 '14 at 13:12

1 Answers1

0

Instead of using the idle event, why not use:

respMap.panTo(mapMarker.getPosition());

inside an onload?

window.onload = function() {
    respMap.panTo(mapMarker.getPosition());
}

Or just do this:

var mapMarker = new google.maps.Marker({
 position: mapPos,
 map: respMap,
 title: 'Test marker'
});

respMap.panTo(mapMarker.getPosition());
Wayne Whitty
  • 19,513
  • 7
  • 44
  • 66