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


Comments

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

Bubble Sort Manually a Linked List in Java -

Image
this first question here. trying manually sort linked list of integers in java , can not figure out wrong code. suggestions? don't error, still have output unordered. tried few different ways, nothing worked. appreciate if can me that. public class node { int data; node nextnode; public node(int data) { this.data = data; this.nextnode = null; } public int getdata() { return this.data; } } // node class public class datalinkedlist implements datainterface { private node head; private int size; public datalinkedlist(){ this.head = null; this.size = 0; } public void add(int data) { node node = new node(data); if (head == null) { head = node; } else { node currentnode = head; while(currentnode.nextnode != null) { currentnode = currentnode.nextnode; } currentnode.nextnode = node; ...
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more