We Keep Coding

How to set the marker position constant on window resize on google maps?

I recently started exploring google maps api. I stumbled upon panby function of google maps api. What I am trying to do is, when my map is loaded initially, the marker should be on the right as shown in the attached image.
Attached screenshot of initial load
However, I want to add a listener for the marker to stay on the right on window resize but do not know what to write in the listener function .Please help me this. Thanks in advance. Here is my code so far.
onAfterRendering: function() {
var myLatlng = new google.maps.LatLng(12.979172,77.715402);
var mapOptions = {
center: myLatlng ,
zoom: 12,
disableDefaultUI: true,
zoomControl: true
};
var x = this.byId("mapCanvas").getDomRef();
map = new google.maps.Map(x, mapOptions);
map.panBy(-300,0);
google.maps.event.addDomListener(window, "resize", function() {
var location= marker.getPosition();
google.maps.event.trigger(map, "resize");
});}

You can recenter the map to the known marker position and then pan left. Something like (untested):
...
map.panBy(-300,0);
var markerLocation= marker.getPosition(); //if you don't have it elsewhere
google.maps.event.addDomListener(window, "resize", function() {
map.setCenter(markerLocation)
map.panBy(-300,0);
google.maps.event.trigger(map, "resize");
});}

google map +boostrap modal not work resize

Hi guys I have the following problem. The google map is not dimensioned against that point. Here is the code I've written so far. I do not know why but this function google.maps.event.trigger(map, "resize");does not work if you put it in click event
$(function() {
var map;
$('.check-in').click(function(e) {
var coordX = $(this).data('x'),
coordY = $(this).data('y');
initialize(coordX, coordY);
});
function initialize(x, y) {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(x, y);
var map_options = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.trigger(map, "resize");
}
});

If I understand your issue correctly, the map is contained within a bootstrap modal and is not resizing once the modal is shown/displayed.
To do this, you need to trigger the google maps resize event on the modal's 'shown' event. For Bootsrap v3, the following should work. For v2, use 'shown' instead of 'shown.bs.modal'
$('#modal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});

I had such a problem.
I solve it whit show the map in
I think there problem whit js files conflict

Javascript accordion feature causes partial displaying

I want to show 2 different maps in accordion(JavaScript Enabled). The main purpose of doing this was to show users an accordion so that users can click on one another to see rather than seeing two big <div> otherwise.
I have done this code (http://jsbin.com/ibanum/1/edit), but the problem is that the second map does appear partially not fully as map1. How to fix that issue?

OK here lies the answer. You should refresh the div on click. So here goes the final JavaScript. But before going there you may have a look at http://jsbin.com/ibanum/20/edit
$(document).ready(function () {
var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);
var mapOptions = {
zoom: 10,
center: fenway,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
$('#accordion').accordion();
$('h3').click(function () {
google.maps.event.trigger(map, 'resize');
});
});
Now the line
google.maps.event.trigger(map, 'resize');
resizes the map as there is a click event on the <h3> tag. Hope this sample is clear

You have to refresh your map container when switching between accordion section by using :
google.maps.event.trigger(map, 'resize');
See the related topic : how-to-update-the-google-map-if-the-map-canvas-of-it-changed-its-dimenstions

Google map's marker not center after resize on bootstrap tab

I bought a geolocation map script and when applied to bootstrap tab it will only shown small top left span. I added resize to overcome it.
$(document).ready(function() { $(‘a[href=”#tab2”]’).click(function(e) { setTimeout(initialise, 1000); }); </script>
function initialise() {
var myMap = document.getElementById('map-myid1');
google.maps.event.trigger(myMap, 'resize');
};
});
The problem I am facing is the marker of map not center, it will hide left outside of map. How to fix it?
See in real action

In bootstrap 3.x.x, this script will help:
var map;
google.maps.visualRefresh = true; // Enable the visual refresh
function initialize() {
// map initialization code
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function () {
$('a[href="#Location"]').on('shown.bs.tab', function(e) {
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
});
});
where a[href="#Location"] is the anchor selector of the tab.

I checked your page source and found that you're using setTimeout(initialise, 1000); Therefore it is bit slow to show map. Try replacing the below code.
$(document).ready(function() {
$('a[href="#tab2"]').click(function(e) {
initialise();
});

Try this:
var map = null;
var center = null;
var bounds = new google.maps.LatLngBounds();
function initMap()
{
map = new google.maps.Map(document.getElementById("Your div id"),
{
center: new google.maps.LatLng("mycenter"),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
center = bounds.getCenter();
map.fitBounds(bounds);
}

I had the same problem with Google Maps and Bootstrap Tab plugin.
I used the 'shown' event to initialize google map in tab instead of the 'click' event.
$('a[href="#tab2"]').on('shown',function(e) {
// Initialized once the google map
// ...
// ...
// use this to redraw google map when current tab is shown.
google.maps.event.trigger(document.getElementById('Your div id'), 'resize');
});

Google maps in Fancybox-wrong display on reopening

I have a problem with Google maps API. I'm using V3 API and fancybox for show up map in lightbox-like div. When I click on the link for the first time, fancybox opens and map loads as well. Everything seems to be OK, but when I close the fancybox and try to reopen, the map is loaded wrong..It loads only at about half area than it has to. Something may be wrong with the map object which is created at second time opening. When I am reloading the page each time I want to get correct map, it's ok..Problems coming out when I try to open-close-open-close and so on..Does anybody know what I should to do? I like fancybox, but now I am totaly screwed:)bottom are some pieces of my code..Thanks
$(document).ready(function () {
$("a.maps").fancybox({
'overlayOpacity ': 0.5,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'ajax'
});
});
THIS CONTENT OF THE FANCYBOX. THE LINK IS CALLED FROM SIMPLE a href=""...
function initialize() {
var myLatlng = new google.maps.LatLng(49.095354, 17.749553);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "DAMN"
});
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '400px';
mapdiv.style.height = '400px';
}
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>

Had this problem myself and came up with this workaround:
google.maps.event.addListener(<map object>, 'tilesloaded', function() {
google.maps.event.trigger(<map object>, 'resize');
<map object>.setCenter(<LatLng>);
});
The map is off center so it needs to be centered as well.

This is a very common problem Please take a look here.
Try to use google.maps.event.trigger(map, "resize");
Hope this helps