Menu
There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) but the solutions there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through Googling.
I've been trying to stuff a map (using v3 of the API) into a jQuery tab with mixed results. I'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't know about Maps).
This is the markup & javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
and
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
And here's what I've found that does/doesn't work (for Maps API v3):
.ui-tabs .ui-tabs-hide { display: none; } instead.#map_canvas to be absolute values. Changing the width and height to auto or 100% causes the map to not display at all, even if it's already been successfully rendered (using absolute width and height).map.checkResize() won't work anymore. Instead, you have to fire a resize event by calling google.maps.event.trigger(map, 'resize').tabsshow event, the map itself is rendered correctly but the controls are not - most are just plain missing.So, here are my questions:
Sorry if this was long-winded but this might be the only documentation for Maps API v3 + jQuery tabs. Cheers!
216
google-places. js is a jQuery plugin which displays Google Places data (currently only reviews) on the page using Google Map's Places API.
You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).
If you have a Google Map on your website, you are using Google Maps API to load that map. Google recently updated their terms and use of their maps API which is effective starting on July 16, 2018. A valid API key and a Google Cloud Platform billing account are now required.
Google Maps APIs are prepackaged pieces of code that let you quickly and easily include maps on your websites or in your mobile apps – and then add extra functions to your applications. They're available for Android, iOS and web browsers, and as HTTP web services that let you pass information between systems.
Note: this answer received an invalid 3rd party edit which essentially replaced its content, something that a 3rd party editor should not do. However, the result may be more useful than the original, so both versions are now given below:
Original author Anon's version from 2010, after one edit by Anon
google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );
is suggested by http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as a v3 substitute for v2's checkResize().
Blech - bad google, no cookie.
For me works when adding a marker:
var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); google.maps.event.addListener(map, "idle", function(){ marker.setMap(map); }); Actually scratch my answer above. The jQueryUI website has the answer and here it is:
Why does...
...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?
Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).
There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize the map once the tab is displayed like this:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps' checkResize() on the particular map.
36
Just redefine the css class for hidden tab:
.ui-tabs .ui-tabs-hide {
position: absolute !important;
left: -10000px !important;
display:block !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
