All geek questions in one place

Google maps will not work inside jQuery user interface tabs

I am using the javascript API for Google Maps. It is pretty simple, I just have:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>); var myOptions = { zoom: 14, 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, map: map, title:"<?php echo $get_music_spot['music_spot_title']; ?>" }); } </script>

in the header, then I have <div style="width:600px; height:500px; float:left;" id="map_canvas"></div> <div style="width:600px; height:500px; float:left;" id="map_canvas"></div> in the body to actually name the map. Then of course I have <body onLoad="initialize()"> That's basically all you need for a base map. But, since it is inside jQuery, for example. On jQuery UI tabs, it works with haywire. Here is a screenshot:

enter image description here

You can see that in the upper left corner only a fragment of the map is displayed. Why is this happening and how can I fix it? I implemented iFrame as a basic embed, but this does not work in IE.

+4
source share
1 answer

As to why it does not work, I could not say why. But try using one of the events in jQuery Tabs widgets to initialize the map, for example, the show or select event.

 $('#myTabs').tabs({ show: function(event, ui){ // check if is "mappanel" and "map" is empty if (ui.panel.id == 'mappanel' && $('#map').is(':empty')) { // load map var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), myOptions); } } });

It is important to include a check there, so that the card does not restart every time the card tab (or any other tab) is selected.

See how this jsFiddle works .

+4
source

Source: https://habr.com/ru/post/1402062/

More articles:


All Articles