User:ScitDei/GeoCoordTool

///* // //var txt=document.editform.wpTextbox1; //txt.value = geocordify(txt.value); //function geocordify(str) { //MAIN FUNCTION describes list of fixes //// Task 1: Replace named html entities with unicode //// Most common replacements //var strtpos = str.find('coord missing|')-2; //var endpos = str.substring(startpos).indexOf('}'); // //function geocordEditSummary() { // var txt = document.forms.editform.wpSummary; // var tag; // // if( typeof geocordTag === 'undefined' ) { // tag = 'Cordinates added using GeoCordTool'; // } else { // tag = geocordTag; // } // // // Is the tag blank? // if( tag.match(/[^\s]/) ) { // // Has it already been tagged? // if( txt.value.indexOf(tag) == -1 ) { // // Append a pipe if necessary // if( txt.value.match(/[^\*\/\s][^\/\s]?\s*$/) ) { // txt.value += ' | '; // } // // Append our tag // txt.value += tag; // } // } // //***/

$('head').append('<link rel="stylesheet" type="text/css" href="https://wiki.riteme.site/wiki/User:ScitDei/GeoCordTool.css">');

// This example adds a search box to a map, using the Google Place Autocomplete // feature. People can enter geographical searches. The search box will return a // pick list containing a mix of places and predicted search terms.

// This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> /**/

// Get the modal
var modal = document.createElement("div");
modal.setAttribute("class","modal-content");
var modaldiv = document.createElement("div");
modaldiv.setAttribute("class","modal-content");
var spn = document.createElement("span"); 
spn.setAttribute("class","close");
var tspn = document.createTextNode("×");
spn.appendChild(tspn);
var para = document.createElement("P");
var t = document.createTextNode("Some <a href="#"> value="text"</a> in the Modal.");
para.appendChild(t);
modaldiv.appendChild(spn);
modaldiv.appendChild(para);
modal.appendChild(modaldiv);
document.body.appendChild(modal);
modal.style.display = "block";
// When the user clicks on  (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
} 
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
var newItem = document.createElement("input");
newItem.setAttribute("id","pac-input");
newItem.style.backgroundColor = "#fff";
newItem.style.fontFamily = "Roboto";
newItem.style.fontSize= "15px";
newItem.style.fontWeight="300";
newItem.style.marginLeft= "12px";
newItem.style.padding="0 11px 0 13px";
newItem.style.textOverflow="ellipsis";
newItem.style.width="400px";
newItem.setAttribute("height","10px");
newItem.setAttribute("type","text");
newItem.setAttribute("placeholder","Search Box");
modal.body.appendChild(newItem);
var newItem2 = document.createElement("div");
newItem2.setAttribute("id","map");
newItem2.setAttribute("value","map1");
modal.body.appendChild(newItem2);
var newItem3 = document.createElement("script");
newItem3.setAttribute("src","https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete");

//newItem3.setAttribute("value","map1");

modal.body.appendChild(newItem3);
function initAutocomplete() {
 var map = new google.maps.Map(document.getElementById('map'), {
   center: {lat: -33.8688, lng: 151.2195},
   zoom: 13,
   mapTypeId: 'roadmap'
 });

 // Create the search box and link it to the UI element.
 var input = document.getElementById('pac-input');
 var searchBox = new google.maps.places.SearchBox(input);
 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

 // Bias the SearchBox results towards current map's viewport.
 map.addListener('bounds_changed', function() {
   searchBox.setBounds(map.getBounds());
 });

 var markers = [];
 // Listen for the event fired when the user selects a prediction and retrieve
 // more details for that place.
 searchBox.addListener('places_changed', function() {
   var places = searchBox.getPlaces();

   if (places.length == 0) {
     return;
   }

   // Clear out the old markers.
   markers.forEach(function(marker) {
     marker.setMap(null);
   });
   markers = [];

   // For each place, get the icon, name and location.
   var bounds = new google.maps.LatLngBounds();
   places.forEach(function(place) {
     if (!place.geometry) {
       console.log("Returned place contains no geometry");
       return;
     }
     var icon = {
       url: place.icon,
       size: new google.maps.Size(71, 71),
       origin: new google.maps.Point(0, 0),
       anchor: new google.maps.Point(17, 34),
       scaledSize: new google.maps.Size(25, 25)
     };

     // Create a marker for each place.
     markers.push(new google.maps.Marker({
       map: map,
       icon: icon,
       title: place.name,
       position: place.geometry.location
     }));

     if (place.geometry.viewport) {
       // Only geocodes have viewport.
       bounds.union(place.geometry.viewport);
     } else {
       bounds.extend(place.geometry.location);
     }
   });
   map.fitBounds(bounds);
 });
}