Develop Reference

Google Map losing its long/lat in Bootstrap tabbed interface

I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:
$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});
Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.
Here's the full js code.
EDIT
This is what I updated the code to:
$(document).ready(function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});

After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.

Google Maps not correctly initialising within Angular directive

I am trying to use the Google Maps API to display a map within an Angular site but it appears to not initialise correctly.
My html page uses bootstrap nav nav-tabs and I use an Angular controller to switch between them.
<ul class="nav navbar-nav">
<li ng-class="{ active:myCtrl.isSet('map') }">
<a href ng-click="myCtrl.setTab('map')">Show Map</a>
</li>
</ul>
With one of the tabs containing only the google map canvas element - set up using an angular directive
Module.directive('mapPage', function() {
return {
restrict: 'E',
template: '<div id="map-canvas"></div>'
};
});
Within my angular controller I set up a listener for the window 'load' event to initialise the map as follows:
google.maps.event.addDomListener(window, 'load', myCtrl.initMap);
myCtrl.initMap = function() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(55.937879, -3.241619),
};
myCtrl.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(55.937879, -3.241619),
map: myCtrl.map
});
myCtrl.map.setCenter(new google.maps.LatLng(55.937879, -3.241619));
}
What I see on screen is the map element showing a grey area with the location marker not centered correctly (it's just off screen).
If I move the map-canvas div to the main section of my index.html page (rather than a sub page within the app) it loads correctly, so I know my Google API js code and html is correct. The map also shows if the page is resized.
It just doesn't work when used on a page that is not rendered immediately. I have tried searching for similar questions/answers but could not find this particular issue.
I have created a simple fiddle that demonstrates the issue.
http://jsfiddle.net/johntough/nc0u7h2c/5/
Any help appreciated!

The issue is, you are loading Map on window load whereas the container will appear on click. Google Map has behavior (never seen documented yet but I have observed it many time though) that if the container is hidden on load, it does not load map in there. I changed your "load" to "click" and its working. The only change is as below,
google.maps.event.addDomListener(window, 'click', myCtrl.initMap);
See fiddle and verify yourself. http://jsfiddle.net/anandgh/nc0u7h2c/6/

Showing a google map in angular-ui modal?

Trying to load a simple google map within an angular-ui modal. However no luck. The data get's passed in fine, but nothing works in terms of the map... Please help.
$modalInstance.opened.then(function() {
var mapOptions = {
center: new google.maps.LatLng(34.834442, -82.3686479),
zoom: 8
};
new google.maps.Map(document.getElementById("eventMap"), mapOptions);
});
Inside the modal html:
<div class="row clearfix">
<div class="col-md-5" id="eventMap" style="display: block; height: 150px;"></div>
</div>
I tried this in the regular page HTML and worked fine...
What am I missing?
Thank you in advance!

You can use angularjs-google-maps; an AngularJS directive for Google maps that is very flexible and powerful and easy to use. I've prepared a working demo for your case:
http://plnkr.co/edit/eEtaGH?p=preview
I hope this helps.

To remove the grayness, according to https://angular-ui.github.io/angular-google-maps/#!/faq:
If rendering starts before elements are full size, google maps calculates according to the smaller size. This is most commonly the case with a hidden element (eg, ng-show). To fix this, use "ng-if" instead, as this will wait to attach to the DOM until the condition is true, which should be after everything has rendered fully.
I've modified your plunker http://plnkr.co/edit/JetUBY?p=preview to remove the grayness.
Controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {
$scope.render = true;
// code here
}
Template:
<map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>

You need to trigger 'resize' event. Follow these lines:
var map = new google.maps.Map(document.getElementById("eventMap"), mapOptions);
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});

I too ran Into a similar situation, where I am loading a map in an angular modal instance. I too searched many places and did't get the correct simple solution for it.
So I gone deeper and found a simple solution for this issue.
The issue is that, the map is trying to get the div from the modal before it gets loaded, and the solution is:
In your controller take a $timeout angular parameter,
function MyController($scope,$cookies,$modal,$window,roomService,$timeout) {
**** after all your model code is defined ****
$modalInstance.opened.then(function() {
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("eventMap"),
myOptions);
}
$timeout(function() {
initialize()
}, 1000);
});
*** use the time out to make the div load and then call the map ***
}
This time out made the map to load perfectly in the modal. A simple solution.

How to use google.maps.event.trigger(map, 'resize')

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again.
I have a Reveal Modal that contains a Google Map API. When a button is clicked, the Reveal Modal pops up, and displays the Google Map. My problem is that only a third of the map is displaying. This is because a resize trigger needs to be implemented. My question is how do I implement the google.maps.event.trigger(map, 'resize')? Where do I place this little snippet of code?
Here is my test site. Click on the Google Map button to see the problem at hand.
http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#
The Reveal Model script:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>
My Google Map Script:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
The div which holds the Google Map:
<div id="myModal" class="reveal-modal large">
<h2>How to get here</h2>
<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">×</a>
</div>
UPDATE 2018-05-22
With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.
The documentation states
When the map is resized, the map center is fixed
The full-screen control now preserves center.
There is no longer any need to trigger the resize event manually.
source: https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

There were actually a couple of problems with your source code.
The initialize() function is created, but never called
The $(document).ready should be called after jQuery us loaded
The map should be a global variable (like #Cristiano Fontes said) and not a var map
(Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
You're using the wrong ID (#myModal1 is never located in the HTML).
And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).
Hope it helped!

Just add it here
<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
google.maps.event.trigger(map, 'resize');
});
});
</script>
BUT you need to put the map as a global variable, so lose the var here
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
--> map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>

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

Didn't found how to leave a comment for the last answer, but +1 for Cristiano Fontes help! It worked. In my case:
<script type="text/javascript">
$('div.map-box').hide();
$('li.map').mouseover(function(){
$('div.map-box').show();
google.maps.event.trigger(map, 'resize');
});
</script>

As now, google.maps.event.trigger(map, 'resize') does nothing. Like we having mat-dialog containing google map in it and there is the same problem. I`ve found some ways you can handle it:
Init map with a timeout.
Change the size of the parent container after map inits and then change it back.
But as for me, all these ways are pretty bad and I`m looking for something better.

Create Google Map v3 After Clicking On An Element

What I would like to do is create a map after an element is clicked on. I'm using Google Maps v3.
I have a Realty listing page that shows 15 results/properties per page. Instead of generating 15 maps I would like 1 map to be created when I click on an element. Once clicked on, the map generation process takes place. The map canvas/div is initially hidden.
I was thinking that the click element and map element relationship would be something like this:
<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>
Using HTML5 I add custom attributes to the element about the property like id, latitude and longitude so I can change the icon and center the map.
I've got a functioning map from which I load markers from a dynamically generated XML file based on the search parameters.
I've been looking at addListener and addDomListener but haven't had any luck. Most searches just pull up issues related to markers.
I had a wonky thing that sort of worked that used jQuery. Something like this:
$('.view-map').click(function(){
google.maps.event.addDomListener( this, 'click', initialize );
$("#" + this.id + "-map").toggle();
});
Obviously this wasn't perfect as you'd have to click the element a couple more times before seeing the map as you've bound another click event to it after having already clicking on it.
I feel like I'm missing something obvious.

function initialize(link) {
var mapDiv = $('#' + link.attr('id') + '-map');
mapDiv.toggle();
var options = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
};
var map = new google.maps.Map(mapDiv[0], options);
}
$('.view-map').click(function(){
initialize(this);
});

In your view-map click function, just call a map initialize method, passing in the appropriate values. This initialize function can then show the map div, and then initialize the map appropriately.
Ugly and unchecked example:
var params = {
lat : 47.5,
lng : -122.5 }
$('.view-map').click(params, function(){
params.id = this.id //e.g. 1234
initialize(params);
});
function initialize(params){
// show the 1234-map div, initialize the map
}