Google Map api V3, setPosition/setCenter is not working -

there 2 places need show google maps. i'm using same code both maps(i mean i'm reusing same code both maps). below links can find screen shots of 2 maps.

https://drive.google.com/file/d/0b2jnvvxsaaludlvzemrvmznmajf4ofb1v0jxc0run1p4ewfv/view - map1

https://drive.google.com/file/d/0b2jnvvxsaaluvgrhnm1hsldhqnpzt3k4s2i2r1yyqkp4owzz/view - map2

i'm showing second map(map2) in bootstarp modal

first map(map1) working fine. in second map(map2), though have used setcenter method, marker not showing @ center of map(instead showing @ top left corner). should place marker @ center of map(in second map)?

below code..

initialize: function(options){    //initializing geocoder    this.geocoder = new google.maps.geocoder();        this.map;				  },    //on show of view  //onshow marionette method, triggered when view shown  onshow: function(){    var address = this.model.get("address");    //render map dummy latlang    this.rendermap();        //render map proper address    if(address!== ""){      this.rendermapwithproperaddress(address);    }  },      rendermap: function(){    var mapcanvas = document.getelementbyid("mapcanvas"), self = this,        mapoptions = {      center: new google.maps.latlng(64.855, -147.833),//dummy latlang      zoom: 15,      maptypeid: google.maps.maptypeid.roadmap,      zoomcontrol: false,      maptypecontrol: false,      streetviewcontrol:false    };        //initializing google map    self.map = new google.maps.map(mapcanvas, mapoptions);        $("#mymodal").on("shown.bs.modal",function(){      google.maps.event.trigger(self.map, "resize");    });    },          rendermapwithproperaddress: function(address){    var self = this,marker;        self.geocoder.geocode( { "address": address}, function(results, status) {  	if (status == google.maps.geocoderstatus.ok) {  		          self.map.setcenter(results[0].geometry.location);                    marker = new google.maps.marker({            map: self.map,            position: results[0].geometry.location,            title: address          });  				            } else {  				                alert("geocode not successful following reason: " + status);  				            }  	    });  }

my guess, without seeing code, need trigger map resize event after bootstrap modal has been shown.

bootstrap modal

maps events

$('#mymodal').on('shown.bs.modal', function () {     google.maps.event.trigger(map, 'resize'); }); 

edit:

here complete , working example. per comment, should 1) trigger map resize , 2) set map center marker coordinates.

var center = new google.maps.latlng(59.76522, 18.35002);  function initialize() {      var mapoptions = {         zoom: 7,         maptypeid: google.maps.maptypeid.roadmap,         center: center     };      map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);      var marker = new google.maps.marker({         map: map,         position: center     }); }  $('.launch-map').on('click', function () {      $('#modal').modal({         backdrop: 'static',         keyboard: false     }).on('shown.bs.modal', function () {         google.maps.event.trigger(map, 'resize');         map.setcenter(center);     }); });  initialize(); 

jsfiddle demo