" + poiData[n].name + '

<\/div > ', $("#map_icon_container").append(r); t = $(".map_icon"); t.draggable({ stop: function (n) { dragIn(n, this, $(this).data("index")) } }); t.dblclick(function () { addIconToMap([map.getCenter().lat(), map.getCenter().lng()], this, $(this).data("index")) }); i = 0; t.on("touchend", function () { var t = (new Date).getTime(), n = t - i; n > 0 && n < 500 && addIconToMap([map.getCenter().lat(), map.getCenter().lng()], this, $(this).data("index")); i = (new Date).getTime() }) } function generatePoiMarker(n) { var t = new google.maps.Marker({ position: new google.maps.LatLng(n.mapPosition[0], n.mapPosition[1]), map: map, draggable: !0, icon: { url: n.icon, size: google.maps.Size(poiIconWidth, poiIconHeight), target: google.maps.Point(poiIconWidth / 2, poiIconHeight / 2), origin: google.maps.Point(poiIconWidth / 2, poiIconHeight / 2) }, title: n.name, type: n.id, zIndex: zIndex }); t.idnr = poiMarkerArry.length; poiMarkerArry.push(t); zIndex++; updatePoiCoords(); google.maps.event.addListener(t, "mouseover", function () { this.setZIndex(zIndex); zIndex++ }); google.maps.event.addListener(t, "dragstart", function () { map.setOptions({ draggable: !1 }) }); google.maps.event.addListener(t, "dragend", function (n) { map.setOptions({ draggable: !0 }); var t = getPixelPosition(this); t.x < binDimensions + binXoffset && t.x > binXoffset && t.y > $map_dragdrop.height() - binDimensions - binYoffset && t.y < $map_dragdrop.height() - binYoffset ? dragOut(n, this) : (poiMarkerArry[this.idnr].position = n.latLng, updatePoiCoords()) }) } function updatePoiCoords() { for (var i = [], r, t, n = 0; n < poiMarkerArry.length; n++)poiMarkerArry[n] !== null && (r = { lat: poiMarkerArry[n].position.lat(), lng: poiMarkerArry[n].position.lng(), type: poiMarkerArry[n].type }, i.push(r)); t = JSON.stringify(i); t = t.replace("[", "[\n ").replace(/},{/g, "},\n {").replace("]", "\n]"); $map_results.val(t); $map_iconcounter.html(i.length) } function getPixelPosition(n) { var i = Math.pow(2, map.getZoom()), f = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng()), r = map.getProjection().fromLatLngToPoint(f), u = map.getProjection().fromLatLngToPoint(n.getPosition()), t = new google.maps.Point(Math.floor((u.x - r.x) * i), Math.floor((u.y - r.y) * i)); return { x: t.x, y: t.y, right: $map_dragdrop.width() - t.x, bottom: $map_dragdrop.height() - t.y } } function dragIn(n, t, i) { var r = n.pageX - $map_dragdrop.offset().left, f = n.pageY - $map_dragdrop.offset().top + 25, e, u; r > 0 && r < $map_dragdrop.width() && f > 0 && (e = new google.maps.Point(r, f), u = overlay.getProjection().fromContainerPixelToLatLng(e), addIconToMap([u.lat(), u.lng()], t, i)) } function addIconToMap(n, t, i) { var r = { mapPosition: n, icon: poiData[i].icon, name: poiData[i].name, id: poiData[i].id }; generatePoiMarker(r); $(t).attr("style", "position: relative; left: 0px; top: 0px") } function dragOut(n, t) { poiMarkerArry[t.idnr] = null; t.setMap(null); updatePoiCoords() } function loadJsonData() { var i, t, n, r; if ($map_results.val() !== "") { try { i = $.parseJSON($map_results.val()) } catch (u) { alert("The JSON data could not be loaded."); return } for (resetPoiMap(), resetPoiMap(), t = 0; t < i.length; t++)for (n = 0; n < poiData.length; n++)poiData[n].id === i[t].type && (r = { mapPosition: [i[t].lat, i[t].lng], icon: poiData[n].icon, name: poiData[n].name, id: poiData[n].id }, generatePoiMarker(r)) } } function resetPoiMap() { for (var n = 0; n < poiMarkerArry.length; n++)poiMarkerArry[n].setMap(null); for ($map_iconcounter.html("0"), $map_results.val(""), poiMarkerArry = [], n = 0; n < polygonArr.length; n++)polygonArr[n].setMap(null); polygonArr = [] } function buildProvinces() { for (var t, n = 0; n < provincesNL.length; n++)t = new google.maps.Polygon({ paths: provincesNL[n], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, fillColor: provinceColors[n], fillOpacity: .2, clickable: !0 }), polygonArr.push(t), t.setMap(map), attachToPolygon(t, provinceCenters[n]) } function buildIslands() { for (var t, n = 0; n < islandsNL.length; n++)t = new google.maps.Polygon({ paths: islandsNL[n], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, fillColor: islandColors[n], fillOpacity: .2, clickable: !0 }), polygonArr.push(t), t.setMap(map), attachToPolygon(t, islandCenters[n]) } function attachToPolygon(n, t) { google.maps.event.addListener(n, "click", function () { map.panTo(t); map.setZoom(9) }); google.maps.event.addListener(n, "rightclick", function () { map.setZoom(zoomLevel); map.panTo(dutchCenterPoint) }) } var map, overlay, poiIconWidth = 32, poiIconHeight = 42, zIndex = 100, poiMarkerArry = [], binDimensions, binXoffset = 10, binYoffset = 25, zoomLevel = 7, $map_results, $map_dragdrop, $map_iconcounter, poiData = [{ id: 10, name: "Icon #1", icon: "/files/icon_1.png" }, { id: 20, name: "Icon #2", icon: "/files/icon_2.png" }, { id: 300, name: "Icon #3", icon: "/files/icon_3.png" }, { id: 400, name: "Icon #4", icon: "/files/icon_4.png" }, { id: 5e3, name: "Icon #5", icon: "/files/icon_5.png" }], polygonArr; setTimeout(function () { $map_results = $("#map_results"); $map_dragdrop = $("#map_dragdrop"); binDimensions = $("#map_recyclebin").height(); $map_iconcounter = $("#map_iconcounter"); $("#map_reset_button").bind("click", function () { resetPoiMap() }); $("#map_load_button").bind("click", function () { loadJsonData() }); initializePoiMap(52.52, 5.28662) }, 50); polygonArr = []