Google map marker not displayed center in Modal pop up

Question

I'm using the code below to display a Google Map on modal pop-up. But the Google Map marker is not displayed at the center of the modal. It's always hidden at the left corner.

Map image

<script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0.0, 0.0);
    var mapOptions = {
      zoom: 14,
      center: new google.maps.LatLng(0.0, 0.0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }


  function codeAddress(i) {       

    var address = document.getElementById('address'+i).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            zoom:10,
            position: results[0].geometry.location
        });

        google.maps.event.addListenerOnce(map, 'idle', function () {
        google.maps.event.trigger(map, 'resize');
        });

        } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });

  }   

 </script>

Also see the code here

Easier with a sample page :) First, their is no use of your LatLng var. Remove it (or use it :)) From what I understand, the map redraw is invoked when map is idle. Are you sure the idle event is fired? — Nico, Oct 26 '16 at 07:24
I'm getting LatLng from my variables dynamically. Its working good. I also see the marker. Issue was it shows left corner.How do i move this one to center of map? Please help — Prabakar Pragmatic, Oct 26 '16 at 07:45
Does a manual map.setCenter(latLng) solve your issue? If yes, it means your map center is not well used by gmap. In this case, just set your map center after the redraw. — Nico, Oct 26 '16 at 07:50
How to set map center after the redraw. Could you please modify and explain with code i sent. I'm very newbie here. — Prabakar Pragmatic, Oct 26 '16 at 12:02

score 0 · Answer 1 · edited May 23 '17 at 10:34

This could also be related to Google map modal issue.

Please try using the modal event handlers as given solution by @SSR:

Bootstrap Modal Map Issue Solution :

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

Solution in this related SO post might also help.

Google map marker not displayed center in Modal pop up

1 Answers1