Two independent google maps in jQuery Tabs
why ist there an offset on the second map?
by metaxos
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDicetsr9R5ZcyksiSSvVln4CQ1H4qFfdw&sensor=false"></script>
<script src="http://www.ejw.de/typo3conf/ext/ejwintern/Resources/Public/JS/oms.min.js"></script>
<div id="map_1" class="locationMap"></div>
CSS
.locationMap {
height: 500px;
width: 665px;
}
JavaScript
var json = [{
"id": "107",
"Name": "Entry A",
"hasPlace": "2",
"lat": "47.413734364600003",
"lng": "8.5389993563399997",
"pendingdate": "0",
"type": "4",
"oid": ""
}, {
"id": "377",
"Name": "Entry B",
"hasPlace": "1",
"lat": "47.414278435999996",
"lng": "8.5384920944200005",
"pendingdate": "0",
"type": "4",
"oid": ""
}, {
"id": "242",
"Name": "Entry C",
"hasPlace": "1",
"lat": "47.414378435999996",
"lng": "8.5284920944200005",
"pendingdate": "0",
"type": "4",
"oid": ""
}];
jQuery(document).ready(function () {
var myLatlng1 = new google.maps.LatLng(-34.397, 150.644);
var myOptions1 = {
zoom: 8,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_1"), myOptions1);
var bounds = new google.maps.LatLngBounds();
$.each(json, function (i, item) {
// console.log(json[i].id);
// make loc
location = new google.maps.LatLng(json[i]['lat'], json[i]['lng']);
hasPlace = json[i]['hasPlace'];
entryName = json[i]['Name'];
// add marker
addMarker(location, entryName, index, hasPlace, openbubble);
// extend bounds
bounds.extend(location);
});
function addMarker(location, content, index, hasPlace, openbubble) {
// Is openbubble set?
var openbubble = (typeof (openbubble) != 'undefined') ? openbubble : true;
// check for marker images:
switch (fachgruppe) {
case "HP":
markerImg = new google.maps.MarkerImage('typo3conf/ext/ejwintern/Resources/Public/Images/GooglePin-HP.png');
break;
case "HMP":
markerImg = new...