jQuery(document).ready(function ($) { var pluginUrl = metaboxScriptParams.pluginUrl; /* * Icon picker */ var markerExpandButton = $('.expand-marker-selector'); if (markerExpandButton.length) { // Show the selected marker if it has been set var currentIconUrl = $('.marker-picker').val(); if (currentIconUrl.length) { // Update the current active icon $('.currentIcon').css('background-image', 'url(' + pluginUrl + 'images/pins/' + currentIconUrl + ')'); // Show the clear button $('.clear-marker-selector').show(); } // show the markers markerExpandButton.click(function (e) { var $markerList = $(e.target).parent().siblings('.iconChooser'); $markerList.slideToggle(); e.preventDefault(); }); /* * Marker chosen click */ $('.iconChooser').on("click", ".mapIcon", function (e) { var $clicked = $(this); // Mark all icons as unselected var $container = $(e.delegateTarget); $('a', $container).removeClass('selected'); // Add selected class $clicked.addClass('selected'); //Update the current active icon $('.currentIcon').css('background-image', 'url(' + pluginUrl + 'images/pins/' + $clicked.data('iconfolder') + '/' + $clicked.data('iconimage') + ')'); //Fill the hidden field with the url so it can be saved $('.marker-picker').val($clicked.data('iconfolder') + '/' + $clicked.data('iconimage')); e.preventDefault(); }); //Clear the marker $('.clear-marker-selector').click(function (e) { //Mark all icons as unselected var $container = $(e.delegateTarget); $('.mapIcon.selected').removeClass('selected'); //Update the current active icon $('.currentIcon').css('background-image', 'none'); //Clear the hidden field $('.marker-picker').val(""); e.preventDefault(); }); } /** * Initialize Google map */ if ($('#GoogleMap').length) { var marker = null; var infowindow = new google.maps.InfoWindow(); var addMapLocationTitle = $('#title'), addMapLocationDescription = $('.addMapLocationDescription'), addMapLocationAddress = $('#maplist_address'), latLongUpdate = $('#UpdateMap'), latField = $('#maplist_latitude'), longField = $('#maplist_longitude'); //Create the map //TODO: Get lat/lng from settings var latlng = new google.maps.LatLng(maplocationdata.defaultEditMapLocationLat, maplocationdata.defaultEditMapLocationLong); var myOptions = { zoom: parseInt(maplocationdata.defaultEditMapZoom, 10), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($("#GoogleMap")[0], myOptions); map.setCenter(latlng); //Lat long update button latLongUpdate.click(function () { addMapListMarker(map, new google.maps.LatLng(parseFloat(latField.val()), parseFloat(longField.val())), ''); latField.val(); longField.val(); return false; }); //Map search var input = $('#MapSearchInput')[0]; var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); //Make return key search $("#MapSearchInput").keypress(function (event) { if (event.which == 13) { // make enter key just search map and stop it from submitting form event.preventDefault(); } }); google.maps.event.addListener(autocomplete, 'place_changed', function () { // infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } // Instructions: update the array below to change the order and // items the address is autofilled with // Full list of options ["place_name","street_number","route","locality","administrative_area_level_2","postal_code","country","postal_town"] var addressPartsToUse = ["place_name", "street_number", "route", "locality", "postal_code", "country"]; var street_numberIndex = -1; var routeIndex = -1; var address = []; //Loop over the address parts for (var j = 0; j < place.address_components.length; j++) { //Get the part type var att = place.address_components[j].types[0]; //See if it's a part we want var partIndex = $.inArray(att, addressPartsToUse); //Fill an array in the correct order if (partIndex != -1) { //Needed to concatenate the first line if (att == "street_number") {street_numberIndex = partIndex;} if (att == "route") {routeIndex = partIndex;} //Mark as done to stop duplicates addressPartsToUse[partIndex] = "done"; //If empty go to next one if (place.address_components[j].long_name !== '') { //Add it to the array address[partIndex] = place.address_components[j].long_name; } } } //If street_number and route exist combine them if (street_numberIndex !== -1 && routeIndex !== -1) { address[street_numberIndex] = address[street_numberIndex] + " " + address[routeIndex]; address.splice(routeIndex, 1); } //See if place name is needed and //If place name is not first line of address add it to the address var nameIndex = $.inArray("place_name", addressPartsToUse); if (nameIndex !== -1 && address[street_numberIndex] != place.name) { address[nameIndex] = place.name; } //Remove any empty items from array var newAddressArray = []; for (var i = 0; i < address.length; i++) { if (address[i] !== undefined && address[i] !== null && address[i] !== "") { newAddressArray.push(address[i]); } } var htmlAddress = newAddressArray.join('
'); var textAddress = newAddressArray.join('\n'); addMapListMarker(map, place.geometry.location, htmlAddress); //If title is empty fill it if (addMapLocationTitle.val() === "") { $('#title-prompt-text').addClass('screen-reader-text'); addMapLocationTitle.val(place.name); } //Fill the description box if (typeof (tinymce) != "undefined") { if (tinymce.activeEditor != null && tinymce.activeEditor.isHidden() != true) { //Check that editor is empty if (tinymce.activeEditor.getContent() == "" || tinymce.activeEditor.getContent() == null) { tinymce.activeEditor.setContent(htmlAddress); } } else { //Check to make sure it is empty if ($('#maplist_description').val() == "") { $('#maplist_description').val(htmlAddress); } } } updateMapFields(place.geometry.location, textAddress); return false; }); if (latField.val() != '' && longField.val() != '') { addMapListMarker(map, new google.maps.LatLng(latField.val(), longField.val()), ''); } //Map clicked google.maps.event.addListener(map, 'click', function (event) { //Content for infowindow var html = ''; //Try to get address from lat/lng reverseGeo(map, event.latLng); }); } function reverseGeo(map, point) { //Try to get address from lat/lng var html = 'Chosen location'; var geocoder = new google.maps.Geocoder(); geocoder.geocode({'latLng': point}, function (results, status) { if (status == google.maps.GeocoderStatus.OK && results[0]) { html = results[0].formatted_address; addMapListMarker(map, point, html); } else { addMapListMarker(map, point, 'Clicked location'); } updateMapFields(point, html); }); } function updateMapFields(point, addressText) { var addMapLocationAddress = $('#maplist_address'), latLongUpdate = $('#UpdateMap'), latField = $('#maplist_latitude'), longField = $('#maplist_longitude'); //Only update address if exists and it's not already been completed if (addMapLocationAddress.length && !addMapLocationAddress.val().length) { addMapLocationAddress.val(addressText); } if (latField.length && longField.length) { latField.val(point.lat()); longField.val(point.lng()); } } function addMapListMarker(map, point, html) { map.panTo(point); map.setZoom(16); if (marker == null) { marker = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: point }); } else { marker.setPosition(point); } infowindow.setContent(html); infowindow.open(map, marker); //Dragged marker stop google.maps.event.addListener(marker, 'dragend', function () { $('#maplist_latitude').val(marker.getPosition().lat()); $('#maplist_longitude').val(marker.getPosition().lng()); reverseGeo(map, marker.getPosition()); }); } });