Develop Reference

Google Maps Api v3 Maps in Ui-Tabs are cut

I know this is a common problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:
please take a look at my js code:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map1,marker1);
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
google.maps.event.addListener(map, "idle", function(){
marker1.setMap(map1);
});
// To add the marker to the map, call setMap();
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng); // be sure to reset the map center as well
});
google.maps.event.addListenerOnce(map1, 'idle', function() {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1); // be sure to reset the map center as well
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
i have two maps, one ofr each tab. i could solve the problem of the center point being hide on the left corner with this from other post:
.ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
display: block !important;
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
but the problem stated here i had no luck even lookin at other topics here.

I found the clean solution:
<script type="text/javascript">
function showAddressMap(){
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
// searchQuery is the address I used this in a JSP so I called with $
geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
google.maps.event.trigger(map, 'resize');
//}
}
JQ(document).ready(function(){
JQ('#tabs').tabs();
JQ('#maptab').bind('click', function() {
showAddressMap();
});
});
</script>
<div id="tabs">
<li><fmt:message key="fieldset.map"/></li>
</div>
<div id="tabs-1">
<fieldset>
<div id="map_canvas" style="height:500px; width:100%;"></div>
</fieldset>
</div>

You need to set the center and trigger a re-size event.
MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');

This code google.maps.event.trigger(map, 'resize') should be in the pageshow like below.
$('#map_result').live('pageshow',function(event){
google.maps.event.trigger(map, 'resize');
});
By the way, have you found the solutions for this? I actually make it works using css.

I know its not a elegant solution, but you can just add an Iframe inside each tab. and when you click the tab, the map load with the correct sizes.

Google Maps InfoWindow Not Popping Up When I Browse Back to Page

Using Google Maps Javascript V3, I have a map set up with some markers. I have a listener on each marker that pops up an InfoWindow on a click event. This works just fine. The problem is when I click on any link on the page and then browse back to the original page, the InfoWindows stop displaying. I have put in alert statements in the listener, so I know the listener is running, but I cannot figure out why the InfoWindows are not showing up.
Here is my code:
<script type="text/javascript">
var map;
var viewable;
var markerArray = new Array();
var infoWindow;
function initialize() {
infoWindow = new google.maps.InfoWindow({ content: "holding..." });
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var bounds = new google.maps.LatLngBounds();
var loop_latlng = new google.maps.LatLng( 42.341111, -71.080707 );
marker = addMarker( loop_latlng, "<strong>$1,495.00</strong> <br> Columbus Ave <br> 0 beds / 1 baths <br> <img src='/images/71428455_0.jpg' width=150> <br> <a href='/mls_rn/8305'>get more details</a>" );
bounds.extend(loop_latlng);
var loop_latlng = new google.maps.LatLng( 42.340022, -71.0657278 );
marker = addMarker( loop_latlng, "<strong>$2,000.00</strong> <br> Union Park St <br> 2 beds / 1 baths <br> <img src='/images/71426623_0.jpg' width=150> <br> <a href='/mls_rn/8253'>get more details</a>" );
bounds.extend(loop_latlng);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
showMarkers();
}
function addMarker(location,contentString) {
var iw = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
content: contentString,
map: map
});
google.maps.event.addListener(marker,'click',function(){
infoWindow.setContent(this.content);
infoWindow.open(map,this);
});
markerArray.push(marker);
return marker;
}
// display all the markers on the map
function showMarkers() {
if (markerArray) {
for ( i in markerArray ) {
markerArray[i].setMap(map);
}
}
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCICKRjJ3Vo_l2hy5uV7GdkYBot6jCtZzI&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
I think this actually may be a Rails issue. If I cut and paste this into an HTML document, it seems to work just fine; however, within my Rails app, I'm seeing the off behaviour. The one thing I notice is that the maps seems to reinitialize in the pure HTML case, but doesn't seem to do so in Rails. I'll look into this more and comment. If anyone has seen this before; however, please chime in!

The behavior you describe doesn't happen for me on the official info windows samples, so i'd expect your code to behave the exact same way.
You would need to manually program for such functionality. On HTML5 compliant browsers, you can use the pageshow event to open the info window manually. However all current (less than 10.0) versions of Internet Explorer don't support the event so you would also have to handle this in the window load event.

How to add a action for addDOMListener of Google Maps?

I just want to load the Google Maps based on the Mouseover event of different div element. For doing this I just used the following simple code. This code itself not working, can someone tell me what mistake I have made?
<script type="text/javascript">
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(40.740, -74.18),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var content = '<strong>A info window!</strong><br/>That is bound to a marker';
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: true
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener($("#showmap"), 'mouseover', function(){ alert("Hi");});
</script>
<div id='showmap'>
Show Map
</div>
<div id="map-canvas" style="width: 500px; height: 400px"></div>
Above simple alert function itself not called for this simple code.

The selector returns the jQuery object and the needed element can be accessed directly from the element array with a [0] . Also, make it "addDomListenerOnce", only need to initialize once.
$("#showmap")[0]
see a demo
google.maps.event.addDomListenerOnce($("#showmap")[0], 'mouseover',
function(){ initialize(); });

I just tried using this and this also worked.
Java Script Code:
function initialize(lat,longit,content) {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, longit),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: false
});
infowindow.open(map, marker);
}
Html Code:
<div id='showmap' onclick="initialize(1.37422,103.945,'<h2>Tampines</h2>')">
Show Map
</div>
I just tried using an idea from java, can we try a method call from the onclick and check whether it is working and to my surprise it worked.

Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap

I'm using Twitter's Bootstrap for defining my CSS. I have made a page with three tabs. The second tab contains a map built with Google Maps. However when opening the page and switching to the second page with the map, the map is not rendered completely. Once I reload the page with the google maps tab as the selected tab the map loads entirely.
I read some posts that advised people with the same problem to add the following code to the javascript:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
However this doesn't seem to be the solution. Please find the complete code below:
Javascript:
<script type="text/javascript">
function initialize() {
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("data.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({position: latlng, map: map});
}
});
}
</script>
HTML:
<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
<div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>
How can I resolve this? Maybe I can add some javascript that reloads the google maps part once the tab is selected but I don't know how to do this....
Updated code still shows the error:
<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
<div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
function initialize() {
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("data.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({position: latlng, map: map});
}
});
map.checkResize();
}
</script>
</div>

I was battling with this issue as well. I was using a modal form and it rendered the map when it was hidden. When the tab is shown, you need to trigger this code:
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
Hopefully it will work for you. If that doesn't work, here is the link where I found the solution. Maybe there will be another helpful comment.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

There's a lot of solutions here and frankly they're all wrong. If you have to hi-jack the default functionality of Bootstrap tabs, you might as well not use Bootstrap tabs. If you're only calling resize after the tab is shown, you may still have issues with the GMaps interface (zoom level and such). You simply have to initialize the map after the tab is visible.
var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
position:myCenter
});
function initialize() {
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initialize();
});
You can see a working example in this bootply: http://www.bootply.com/102241
Note: if your interface is still glitchy, it could be this issue:
Google Maps API V3 : weird UI display glitches (with screenshot)
Using the most recent gmaps api, you just need to add this to your styling:
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

Works for me after testing different delays :
$(window).resize(function() {
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
}, 300)
});
Hope it helps.

I have solved the problem by using
google.maps.event.trigger(map, 'resize');
inside show function in bootstrap-tab.js means at the time of showing the box you should trigger resize event and will work..
Edit: I have seen another link with the same answer
Google Maps API v3, jQuery UI Tabs, map not resizing
I have seen this link after solving the problem to find out the reason which is still unanswered that why resize event does not works on the click event of the tabs but works in the tab js

this works fine for me, I use jquery tabs
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
from this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

To show a google maps in a hidden div, the div must show before the map is created and loaded. Below is an example:
<div id="map_canvas" style="width:500px; height:500px"></div>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#map_canvas').delay('700').fadeIn();
setTimeout(loadScript,1000);
});
});
function initialize() {
var title= "Title";
var lat = 50;
var lng = 50;
var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:artTitle
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
</script>

For me, what it worked was to call the function that renders the map after the, in my case, the modal had shown.
All I had to do was:
$(document).on("shown", "#eventModal", function(){
bindMap(coordinates);
});
You can do the same with the tabs, because they also have a "shown" event.

Google map v3 not working on older IE

Im going a bit crazy here. My google map v3 will work on everything but older versions of IE. Im trying to debug it but with zero success. I load the map into a fancybox which shouldnt have any effect. Any help would be appreciated.
/*googlemap*/
function initialize() {
var myLatlng = new google.maps.LatLng(lat,lon);
var myOptions = {
zoom:14,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({content: contentString, maxWidth: 400});
var marker = new google.maps.Marker({position: myLatlng, map: map, title: hotelName});
google.maps.event.addListener(marker,'click', function(){infowindow.open(map, marker)});
};

Your missing a semicolon on this line
google.maps.event.addListener(marker,'click', function(){infowindow.open(map, marker)});
After
infowindow.open(map,marker);
Missing semicolons cause issues in IE