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");
});}

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

jquery link toggle with google maps

Im having problems working out how to get this toggle working, by default it hides the map and when you click show map i want the map to slide down and change the link test to hide map which then of course will slide back up but does not seem to be working..... anyone got any ideas?
Also if anyone knows of a solution for the google maps issue im also having please let me know, because the made is hidden when you show / slides down it does not show most of the map (something about resizing i think i remember reading up on)
i have made a jsfiddle here: http://jsfiddle.net/DfVBb/ although does not work there at all for some reason. thanks in advance!
HTML
<div class="slideToggleBox">
<div id="map_div"> </div>
</div>
show map
JS
<script type="text/javascript">
$('#map_div').hide();
$('#slideToggle').click(function() {
$('#map_div').slideToggle('slow', function() {
$('#slideToggle').text('hide map');
}, function(){
$('#slideToggle').text('show map');
});
return false
});
</script>
Maps JS
$(document).ready(function() {
var latlng = new google.maps.LatLng(53.334583, -0.961674);
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_div'), options);
var image = new google.maps.MarkerImage('/images/map-icon.png',
new google.maps.Size(680, 178),
new google.maps.Point(0,0),
new google.maps.Point(18, 50)
);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.334583,-0.961674),
map: map,
icon: image
});
});
</script>

I managed to work out a solution for this and also fixing the resize issue
$(function () {
// create a center
var c = new google.maps.LatLng(53.334583, -0.961674);
//create map options object
var mapOptions = {
zoom: 14,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$("#slideToggle").click(function () {
$('#map_canvas').slideToggle(300, function(){
if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
else $('#slideToggle').text('show map');
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
}); // slide it down
});
});

I looked at your fiddle, it has to be cleaned. Based on my understanding, you're trying to toggle Google maps on button click.
Mistakes in your Fiddle:
(1) The Google maps is not initialized. The below is used to initialize Google maps.
google.maps.event.addDomListener(window, 'load', initialize);
(2) Your .slideToggle() has to be cleaned up. It has be somehow like
$('#slideToggle').on('click', function () {
$('#map_canvas').slideToggle('slow', function () {
if ($('#slideToggle').text() !== "hide map")
$('#slideToggle').text('hide map');
else
$('#slideToggle').text('show map');
});
return false;
});
I've created a JSFiddle, please go through it and share your thoughts.

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');
});

How to get some information in google maps without click event on marker and show this in a div, other than infoWindow

Hi I am showing some markers on my google map and on click of the marker, I am calling the click event and showing some info about that place to the right side(area other than Map and not as an infoWindow). Now this event gets fired on click, and by default when page loads my div remains blank, How can I have the div the basic information being shown up once the map loads up. I need to show the information that corresponds to the marker that is the center point of the map, and later when the users click the marker icons the info should change and correspond to the particular marker being clicked
I have tried something but it doesn't work:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var places = [];
places.push(new google.maps.LatLng(51.43581, -0.51744));
places.push(new google.maps.LatLng(48.87187, 2.31764));
places.push(new google.maps.LatLng(45.45979, 9.19681));
var infowindow;
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
}
}
$("document").ready(function () {
loadMap();
});
UPDATE EDITED
Basically I need something like Layer KML features
But the info should come on the right hand side by default for the first time. Later on when the marker is clicked, the info should change. I am also not adamant that I need this info in a kml file(xml is fine with me as well). I can just have a marker and info should popup on click and for the first time be default as well depending on the location of the user.
Bottom Line: I need the info to appear on click of a marker and by default when the page loads the info should appear corresponding to the center point of the map. which means users coming from different locations will see different info's corresponding to their location from where they are coming.(I am centering the map based on users location)

You can use the addDomListener event of the google maps api. Something like this:
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map_canvas"></div>
</body>
Although the above code is Maps Javascript API code, the addDomListener() method binds to the window object of the browser and allows the API to communicate with objects outside of the API's normal domain.
further reading
Actually the basic Idea is that you need to read an XMl and parse the data and and show this in a seperate div on right side., This div you can create dynamically when you load the map e-g:
$("#body").append("<div class='newdiv'></div>")

From the google Docs in the section about InfoWindow:
Note that if you call open() without passing a marker, the InfoWindow
will use the position specified upon construction through the
InfoWindow options object.
So in your code, why don't you simply init your infoWindow and call the open() method? I am not particularly familiar with the api, but how about:
var infowindow = new google.maps.InfoWindow({
content: 'your initial text'
});
infowindow.open();
Or if you need the marker for special purposes on the infowindow, init an marker with the center position and use that in the infowindow.open(your_initial_pos) call.

You can use jQuery to .triger() a click event on the first marker on document.ready:
$(marker).trigger('click');
This will run the code you have already written and make it so when the page loads your div will be populated with data from whatever element you trigger the click on.
When you bind to document.ready you don't need encapsulate document in quotes:
$(document).ready(function () {...});
Or you could use the short-hand if you're into that sort of thing:
$(function () {...});
UPDATE
You can place the trigger function call after your for loop where you are setting up the markers:
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
//only run on the first marker
if (i === 0) {
//trigger a click event to show the first info-window
$(marker).trigger('click');
}
}

You can fire a tilesloaded event on the map object. Check out the Map reference for events
tilesloaded waits until the map tiles are actually loaded before firing. Using your code, you could do something like this:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'tilesloaded', function() {
doSomething();
});