CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Swathi
Swathi

Reputation: 119

Google Map api V3, setPosition/setCenter is not working

There are two places where i need to show google maps. I'm using same code for both maps(I mean I'm reusing same code for both maps). Below are links where you can find screen shots of those two 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) is working fine. But in second map(map2), though I have used setCenter method, marker is not showing at center of the map(instead it is showing at top left corner). what should i do to place marker at center of the map(in second map)?

below is my code..

initialize: function(options){
  //initializing the geocoder
  this.geocoder = new google.maps.Geocoder();
  
  this.map;				
},

//on show of the view
//onShow is a marionette method, which will be triggered when view is shown
onShow: function(){
  var address = this.model.get("address");
  //render the map with dummy latLang
  this.renderMap();
  
  //render the Map with 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 was not successful for the following reason: " + status);
				      
    }
	
  });
}

Upvotes: 0

Views: 6403

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22491

My guess, without seeing your code, is that you need to trigger a map resize event after the bootstrap modal has been shown.

Bootstrap modal

Maps events

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

Edit:

Here is a complete and working example. As per my comment, you should 1) Trigger a map resize and 2) set the map center to your 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

Upvotes: 6

Related Questions