// map markers var map; var markers = []; markers[1] = []; markers[2] = []; var cur_type = [true,true]; var markers_list = []; var markers_source = []; var markers_xy = []; var markers_pcs = []; var markers_title = []; var topRight; var bottomLeft; var scale; var marker_box_x = 12; // default right margin of overlay from marker var image1,image2,image3,image4,image5,image6,image7,image8,image9; // markers in arrays function initialize() { // set map var myLatLng = new google.maps.LatLng(49.910895,15.390794); var mapOptions = { zoom: 7, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map'),mapOptions); // pois markers var anchorTop = 25; var anchorLeft = 25; var originTop = 0; var originLeft = 0; image1 = new google.maps.MarkerImage('pcs/marker-logo.png', new google.maps.Size(40, 34), new google.maps.Point(originLeft,originTop), new google.maps.Point(anchorLeft,anchorTop) ); image2 = new google.maps.MarkerImage('pcs/marker-info.png', new google.maps.Size(40, 34), new google.maps.Point(originLeft,originTop), new google.maps.Point(anchorLeft,anchorTop) ); for (var key in markers_source) { addMarker(key,markers_source[key][0],markers_source[key][1],markers_source[key][2]); } // listener on idle map -> recalculate position all markers google.maps.event.addListener(map, 'idle', function() { // get map x,y topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); scale = Math.pow(2,map.getZoom()); // get marker x,y for (var i = 1; i < markers_list.length; i++) { worldPoint = map.getProjection().fromLatLngToPoint(markers_list[i].getPosition()); markers_xy[i] = new google.maps.Point((worldPoint.x-bottomLeft.x)*scale,(worldPoint.y-topRight.y)*scale); } }); // hide overlay if move map google.maps.event.addListener(map, 'center_changed', function() { $("#overlay").hide(); }); // hide overlay if zoom change google.maps.event.addListener(map, 'zoom_changed', function() { $("#overlay").hide(); }); } // add marker function addMarker(id,lat,lon,poiType) { markers_list[id] = new google.maps.Marker({ position: new google.maps.LatLng(lat,lon,true), map: map, icon: eval('image'+poiType) }); markers[poiType].push(markers_list[id]); var showMarkerBubble = new Function("event", "markerBubble("+id+");"); google.maps.event.addListener(markers_list[id], 'mouseover', showMarkerBubble); google.maps.event.addListener(markers_list[id], 'mouseout', function() { $("#overlay").hide(); }); } // function for show markers overlay function markerBubble(num) { $("#overlay strong").text(markers_title[num]); $("#overlay div").css("background-image", "url('"+markers_pcs[num]+"')"); if (markers_xy[num].x > ($("#map").width()-237)) { marker_box_x = -237; $("#overlay").css("background-image", "url('pcs/map-buble-left-bg.png')"); $("#overlay").css("padding-left", "10px"); } else { marker_box_x = 7; $("#overlay").css("background-image", "url('pcs/map-buble-right-bg.png')"); $("#overlay").css("padding-left", "13px"); } $("#overlay").css({ left:($("#map").position().left + markers_xy[num].x + marker_box_x), top:($("#map").position().top + markers_xy[num].y - 51) }); $("#overlay").show(); } function setMarkersToMap(sendMap,type) { if (!type) { for (var key in markers) { for (var i = 0; i < markers[key].length; i++) { markers[key][i].setMap(sendMap); } } } else { for (var i = 0; i < markers[type].length; i++) { markers[type][i].setMap(sendMap); } } } // hide markers function clearMarkers(type) { if (!cur_type[type]) { setMarkersToMap(map,type); cur_type[type] = true; } else { setMarkersToMap(null,type); cur_type[type] = false; } } // shows markers function showOverlays(type) { setMarkersToMap(map,type); } // deletes all markers function deleteMarkers(type) { clearMarkers(type); markers[type] = null; } google.maps.event.addDomListener(window, 'load', initialize);