let map; let geocoder; let item_id_map; let drawingManager; let drawingListener; let polygons = new Array(); let polyline_markers = new Array(); let polylines = new Array(); let previous_marker; current_polyline = undefined; let previous_map_height = ""; function initMap() { map = new google.maps.Map(document.getElementById("map_container"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, mapTypeId: "hybrid", disableDefaultUI: true, tilt: 0 }); drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYGON, ], } }); geocoder = new google.maps.Geocoder(); } function io_geocode(){ let prefix = "#io_mc_" let request = "" let address_value = ""; if(jQuery(prefix+"address").length) { address_value = jQuery(prefix+"address").val(); if(address_value) setCookie("address", jQuery("#io_mc_address").val(), 14); } let city_value = ""; if(jQuery(prefix+"city").length){ city_value = jQuery(prefix+"city").val(); if(city_value) setCookie("city", jQuery("#io_mc_city").val(), 14); } let state_value = ""; if(jQuery(prefix+"state").length){ state_value = jQuery(prefix+"state").val(); if(state_value) setCookie("state", jQuery("#io_mc_state").val(), 14); } let zip_value = ""; if(jQuery(prefix+"zip").length){ zip_value = jQuery(prefix+"zip").val(); if(zip_value) setCookie("zip", jQuery("#io_mc_zip").val(), 14); } request = address_value + " " + city_value + " " + state_value + " " + zip_value; if(request){ geocoder.geocode({address:request}).then((result) => { const { results } = result; map.setCenter(results[0].geometry.location); map.setZoom(24); return results; }); } if(!addressProvided()) { jQuery("#io_map_address_entry").attr("open", "open"); }else{ jQuery("#io_map_address_entry").removeAttr("open"); } } function openMap(element){ cartHide() io_map_clear() let unit = "meters" if(country === "US") unit = "feet" polygons = new Array(); polyline_marker_sets = new Array(); polylines = new Array(); previous_marker = undefined; current_polyline = undefined; jQuery("#io_mc_address").val(getCookie("address")); jQuery("#io_mc_state").val(getCookie("state")); jQuery("#io_mc_city").val(getCookie("city")); jQuery("#io_mc_zip").val(getCookie("zip")); io_geocode(); google.maps.event.removeListener(drawingListener); if(element.id == "calcPriceOpenMap"){ item_id_map = jQuery(".io_product_infobox .item_rentalid").text(); if(jQuery(".io_product_infobox .item_qtytype").text() == "Area"){ setMapTools_Area(unit, true) }else if(jQuery(".io_product_infobox .item_qtytype").text() == "Perimeter"){ setMapTools_Perimeter(unit, true) } } else{ item_id_map = jQuery(element).parent().parent().find(".item-rentalid").text(); if(jQuery(element).parent().parent().find(".item-qtytype").text() == "Area"){ setMapTools_Area(unit) }else if(jQuery(element).parent().parent().find(".item-qtytype").text() == "Perimeter"){ setMapTools_Perimeter(unit) } } } function addressProvided(){ if(jQuery("#io_mc_address").val() && jQuery("#io_mc_state").val() && jQuery("#io_mc_city").val() && jQuery("#io_mc_zip").val() ){ return true; } return false; } function setMapTools_Area(unit, item_page=false){ jQuery.fancybox.open(jQuery(".map_fancybox")); drawingManager.setOptions({ drawingControlOptions: { drawingModes: [google.maps.drawing.OverlayType.POLYGON] }, drawingMode: google.maps.drawing.OverlayType.POLYGON, polygonOptions: { fillColor: "#0191fc", strokeColor: "#0113fc" }, }); let units = "meters" if(country === "US") units = "feet" jQuery("#io_measurement_input_label").text("Approximate area in "+units+": "); jQuery("#io_map_manual_input").off("click"); jQuery("#io_map_manual_input").on("click", function(){manual_calc_price("Area", item_page)}); jQuery("#io_perimeter_options_container").hide(); jQuery("#io_map_new_line_container").hide(); jQuery("#io_map_instructions").html("Use the map below to take measurements by clicking on each corner of the area you want to measure. You can draw multiple polygons to include multiple separate surfaces in the total area. Press Clear to remove all polygons and start again. Alternatively if you know the approximate area in "+units+" you can enter the measurement manually below. When finished press Done and the price of the item will be updated (more)") drawingListener = google.maps.event.addListener(drawingManager, "polygoncomplete", function(polygon) { polygons.push(polygon); let convert_feet = 1; if(country === "US") convert_feet = 10.764; let approx_area = 0; polygons.forEach(function(polygon) { approx_area += google.maps.geometry.spherical.computeArea(polygon.getPath()) * convert_feet; }); calcprice_approx_area(Math.round(approx_area)); }); drawingManager.setMap(map); } function setMapTools_Perimeter(unit, item_page=false){ jQuery.fancybox.open(jQuery(".map_fancybox")); drawingManager.setOptions({ drawingControlOptions: { drawingModes: [google.maps.drawing.OverlayType.MARKER] }, drawingMode: google.maps.drawing.OverlayType.MARKER }); let height = jQuery("#perimeter_height").val(); let units = ""; if(height){ units = "sq meters" if(country === "US") units = "sq feet" jQuery("#io_measurement_input_label").text("Approximate surface area in "+units+": "); jQuery("#io_map_instructions").html("Use the map below to take measurements by clicking on each corner of the area you want to measure. You can add additional lines by clicking Add New Line button to include more structures into the total. Press Clear to remove all lines and start again. Alternatively if you know the approximate surface area in "+units+" you can enter the measurement manually below. When finished press Done and the price of the item will be updated (more)") }else{ units = "meters" if(country === "US") units = "feet" jQuery("#io_measurement_input_label").text("Approximate perimeter in "+units+": "); jQuery("#io_map_instructions").html("Use the map below to take measurements by clicking on each corner of the area you want to measure. You can add additional lines by clicking Add New Line button to include more structures into the total. Press Clear to remove all lines and start again. Alternatively if you know the approximate perimeter in "+units+" you can enter the measurement manually below. When finished press Done and the price of the item will be updated (more)") } jQuery("#io_map_manual_input").off("click"); jQuery("#io_map_manual_input").bind("click", function(){manual_calc_price("Perimeter", item_page)}); jQuery("#perimeter_height").bind("change", function(){change_perimeter_instructions()}); jQuery("#io_perimeter_options_container").show(); jQuery("#io_map_clear_container").show(); jQuery("#io_map_new_line_container").show(); current_polyline = new google.maps.Polyline({ map: map, path: [], strokeColor: "#0113fc", strokeOpacity: 1.0, strokeWeight: 2 }) drawingListener = google.maps.event.addListener(drawingManager, "markercomplete", function(marker) { polyline_markers.push(marker) marker.setVisible(false); current_polyline.getPath().push(marker.getPosition()) if(previous_marker){ let convert_feet = 1; if(country === "US") convert_feet = 3.281; let approx_perimeter = 0; polylines.forEach(function(polyline) { if(convert_feet > 1) convert_feet = 10.764 approx_perimeter += google.maps.geometry.spherical.computeArea(polyline.getPath()) * convert_feet; }); approx_perimeter += google.maps.geometry.spherical.computeLength(current_polyline.getPath()) * convert_feet; calcprice_approx_perimeter(Math.round(approx_perimeter)); } previous_marker = marker; }); jQuery("#perimeter_height_contianer").show(); drawingManager.setMap(map); } function change_perimeter_instructions(){ let height = jQuery("#perimeter_height").val(); if(height){ units = "sq meters" if(country === "US") units = "sq feet" jQuery("#io_measurement_input_label").text("Approximate surface area in "+units+": "); jQuery("#io_map_instructions").html("Use the map below to take measurements by clicking on each corner of the area you want to measure. You can add additional lines by clicking Add New Line button to include more structures into the total. Press Clear to remove all lines and start again. Alternatively if you know the approximate surface area in "+units+" you can enter the measurement manually below. When finished press Done and the price of the item will be updated (more)") }else { units = "meters" if(country === "US") units = "feet" jQuery("#io_measurement_input_label").text("Approximate perimeter in "+units+": "); jQuery("#io_map_instructions").html("Use the map below to take measurements by clicking on each corner of the area you want to measure. You can add additional lines by clicking Add New Line button to include more structures into the total. Press Clear to remove all lines and start again. Alternatively if you know the approximate perimeter in "+units+" you can enter the measurement manually below. When finished press Done and the price of the item will be updated (more)") } } function manual_calc_price(method, item_page){ let approx_measurement = parseInt(jQuery("#io_measurement_input").val()); let units = ""; if(approx_measurement){ if(method == "Area"){ units = "sq meters" if(country === "US") units = "sq feet" }else if(method == "Perimeter"){ let height = jQuery("#perimeter_height").val(); if(height){ units = "sq meters" if(country === "US") units = "sq feet" }else{ units = "meters" if(country === "US") units = "feet" } } simpleCart.items().forEach(function (item, index){ if(item.get("rentalid") === item_id_map){ item.set("units", units); item.set("quantity", approx_measurement); } }); simpleCart.update(); if(item_page || jQuery(".io_product_infobox .item_rentalid").text() == item_id_map) set_price_on_item_page(units, approx_measurement); if(!item_page) cartShow(); } jQuery.fancybox.close(); } function calcprice_approx_area(approx_area){ jQuery("#io_measurement_input").val(approx_area); } function calcprice_approx_perimeter(approx_perimeter){ let height = jQuery("#perimeter_height").val(); if(height && height > 0) approx_perimeter *= parseInt(height); jQuery("#io_measurement_input").val(approx_perimeter); } function set_price_on_item_page(units, measurement){ let measurement_price = document.querySelector(".io_product_measurement_price"); if(measurement_price==undefined){ var first_price = document.querySelector(".io_product_price_box"); if(first_price != null){ measurement_price = first_price.cloneNode(true); /* clear all classes */ measurement_price.className = ""; measurement_price.classList.add("io_product_price_box"); measurement_price.classList.add("io_product_measurement_price"); measurement_price.style.display = "grid"; /* Make a hidden data span for when adding to cart */ raw_measurement = document.createElement("span"); raw_measurement.classList.add("io_measure_price_raw_measurement"); raw_measurement.style.display = "none"; raw_measurement.textContent = measurement; measurement_price.appendChild(raw_measurement); first_price.before(measurement_price); } } var price_1h = Number(jQuery(".io_product_price_1h_"+jQuery(".io_product_infobox .item_rentalid").text()).text().replace(/[^0-9.-]+/g,"")); measurement_price.querySelector("p:nth-child(1)").innerHTML = simpleCart.toCurrency(price_1h*measurement); measurement_price.querySelector("p:nth-child(2)").innerHTML = "For approximately "+measurement+" "+units; } function io_map_clear() { if(drawingManager.getDrawingMode() == "polygon"){ drawingManager.setDrawingMode("polygon"); } if(polygons) polygons.forEach(function(polygon) { polygon.setMap(null); }); if(current_polyline) current_polyline.setMap(null); if(polylines) polylines.forEach(function(polyline) { polyline.setMap(null); }); if(polyline_markers) polyline_markers.forEach(function(marker) { marker.setMap(null); }); current_polyline = new google.maps.Polyline({ map: map, path: [], strokeColor: "#0113fc", strokeOpacity: 1.0, strokeWeight: 2 }); polygons = new Array(); polylines = new Array(); polyline_markers = new Array(); previous_marker = undefined; } function io_map_new_line() { polylines.push(new google.maps.Polyline({ map: map, path: current_polyline.getPath(), strokeColor: "#0113fc", strokeOpacity: 1.0, strokeWeight: 2 }) ); previous_marker = undefined; current_polyline.setMap(null); current_polyline = new google.maps.Polyline({ map: map, path: [], strokeColor: "#0113fc", strokeOpacity: 1.0, strokeWeight: 2 }); } function show_more_instruct_click(show_more_button) { if(show_more_button.textContent == "(more)") { show_more_button.textContent = "(hide)"; jQuery("#io_map_additional_instructions").show(); }else if(show_more_button.textContent == "(hide)") { show_more_button.textContent = "(more)"; jQuery("#io_map_additional_instructions").hide(); } } function perimeter_height_changed(){ let current_map_height = jQuery("#perimeter_height").val(); if(current_map_height && current_map_height > 0){ if(jQuery("#io_measurement_input").val() && !previous_map_height){ let measurement = jQuery("#io_measurement_input").val(); jQuery("#io_measurement_input").val(measurement * current_map_height); }else if(jQuery("#io_measurement_input").val() && previous_map_height){ let measurement = jQuery("#io_measurement_input").val(); if(previous_map_height > 0){ measurement = measurement / previous_map_height; } jQuery("#io_measurement_input").val(measurement * current_map_height); } }else if (!current_map_height || current_map_height == 0){ if(jQuery("#io_measurement_input").val() && previous_map_height){ let measurement = jQuery("#io_measurement_input").val(); if(previous_map_height > 0){ measurement = measurement / previous_map_height; } jQuery("#io_measurement_input").val(measurement); } } previous_map_height = current_map_height; } window.initMap = initMap;