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
jQuery(document).ready(function () {
var json = [{
"id": "107",
"Name": "Entry A",
"hasPlace": "2",
"lat": "47.413734364600003",
"lng": "8.5389993563399997",
"pendingdate": "0",
"type": "4",
"oid": "",
"infoWindow": "infos"
}, {
"id": "377",
"Name": "Entry B",
"hasPlace": "1",
"lat": "47.414278435999996",
"lng": "8.5384920944200005",
"pendingdate": "0",
"type": "4",
"oid": "",
"infoWindow": "infos"
}, {
"id": "242",
"Name": "Entry C",
"hasPlace": "1",
"lat": "47.414378435999996",
"lng": "8.5284920944200005",
"pendingdate": "0",
"type": "4",
"oid": "",
"infoWindow": "infos"
}, {
"id": "222",
"Name": "Entry D",
"hasPlace": "1",
"lat": "47.414378435999996",
"lng": "8.5284920944200005",
"pendingdate": "0",
"type": "4",
"oid": "",
"infoWindow": "infos"
}];
var gm = google.maps;
var iw = new gm.InfoWindow();
var infoBubble;
var myLatlng1 = new gm.LatLng(json[0].lat, json[0].lng);
var myOptions1 = {
zoom: 8,
center: myLatlng1,
mapTypeId: gm.MapTypeId.ROADMAP
};
var map = new gm.Map(document.getElementById("map_1"), myOptions1);
var bounds = new gm.LatLngBounds();
var usedLatLng = [];
oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
// first of all, clear all markers already there:
deleteOverlays();
$.each(json, function (i, item) {
// make loc
current_koordinaten = new gm.LatLng(json[i].lat, json[i].lng);
hasPlace = json[i].hasPlace;
entryName = json[i].Name;
infoWindow = json[i].infoWindow;
// add marker
...