Advertisement
Guest User

how do I make the rectangle fit around clicked location?

a guest
May 9th, 2020
379
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function initMap(){
  2.   const map = new google.maps.Map(document.getElementById('map'), {
  3.           center: {lat: 34.23833238, lng: -118.523664572},
  4.           zoom: 16,//15.8,
  5.           gestureHandling: "none",
  6.           disableDefaultUI: true,
  7.           clickableIcons: false
  8.         });
  9.  
  10.     map.addListener("dblclick", e => {
  11.       console.log("I just double clicked!!!", e);
  12.       const geoCoder = new google.maps.Geocoder();
  13.  
  14.       geoCoder.geocode({latLng: e.latLng}, (results, status) => {
  15.         if (status = google.maps.GeocoderStatus.OK) {
  16.           console.log('results from geocode api: ', results)
  17.         }
  18.       })
  19.  
  20.       var rectangle = new google.maps.Rectangle({
  21.           strokeColor: '#FF0000',
  22.           strokeOpacity: 0.8,
  23.           strokeWeight: 2,
  24.           fillColor: '#FF0000',
  25.           fillOpacity: 0.35,
  26.           map: map,
  27.           bounds: {
  28.             north: 34.2,
  29.             south: 34.9,
  30.             east: -118.2,
  31.             west: -118.9
  32.           }
  33.         });
  34.  
  35.     });
  36.     //generate list of possible CSUN locations
  37.     const listOfPlaces = ["Where is Bayramian Hall", "Where is the Student Recreation Center", "Where is Jacaranda Hall", "Where is Juniper Hall", "Where is Redwood Hall", "Where is Matador Bookstore"];
  38.     listOfPlaces.sort(() => 0.5 - Math.random());
  39.     const currentQuestions = listOfPlaces.slice(0, 5);
  40.     const currentQuestionIndex = 0;
  41.     console.log('five selected questions', currentQuestions);
  42.     document.getElementById("instructions").innerHTML += `<p>${currentQuestions[currentQuestionIndex]}</p>`;
  43. }
  44.  
  45.  
  46.  
  47. /*
  48.  
  49. //generate list of possible CSUN locations
  50. const listOfPlaces = ["Bayramian Hall", "Student Recreation Center", "Jacaranda Hall", "Juniper Hall", "Redwood Hall", "Matador Bookstore"];
  51.  
  52. //function for wrong answer
  53. function makeRed(userAnswer) {
  54.   console.log("make red");
  55.  });
  56.   //turn the user answer on the map red
  57. }
  58.  
  59. //function for right answer
  60. function makeGreen(userAnswer){
  61.   console.log("make green");
  62.   //turn the user answer on the map green
  63. }
  64.  
  65. //function to prompt user
  66. function promptUser(userAnswer){
  67.   console.log("click on an object");
  68.   //ask user to double click on a place
  69.   //userAnswer.addEventListener("click", rightOrWrong(userAnswer);
  70.   const findPlace  = listOfPlaces.find(place => place === userAnswer);
  71.   if(listOfPlaces[userAnswer].ondblclick()){
  72.     rightOrWrong(userAnswer);
  73.   }
  74. }
  75.  
  76. var rightAnswers=0;
  77. //function that determines if user is right or wrong
  78. function rightOrWrong(userAnswer) {
  79.   if (userAnswer === correctAnswer) {
  80.     document.write(`<p>You got it right!!!<p>`);
  81.  
  82.     //run jQuery function to make clicked place on google green
  83.     console.log("you got it right!");
  84.     makeRed();
  85.     rightAnswers++;
  86.   } else {
  87.     document.write(`<p>You got it wrong!!!</p>`);
  88.     //run jQuery function to make clicked place on google red
  89.     console.log("you get it wrong!");
  90.     makeGreen();
  91.   }
  92. }
  93.  
  94. //for each place on the map
  95. for (var i = 0; i < 5; i++){
  96.  
  97.   //prompt user to click on a location
  98.    promptUser('');
  99.  
  100.   //generate a correct answer to compare this to
  101.    let correctAnswer = listOfPlaces[(Math.random() * listOfPlaces.length()).floor()];
  102.    document.write(`<p>Click on the location of , ${correctAnswer}</p>`);
  103.  
  104.   //some sort of event handler to let the user click on a location, then determine whether they were right or right or wrong
  105.   //based on that click
  106.   let userAnswer=document.getElementById("rightAnswer").addEventListener("click", rightOrWrong());
  107.  
  108.   rightOrWrong(userAnswer);
  109.  
  110.   document.write(`${rightAnswers}/5`);
  111.   document.log("script runs");
  112. }
  113. */
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement