Info Windows

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Info Windows</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&callback=myMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var workerlist;
var jobprice = {Price: "$10", total_amount: "$100"};
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
workerlist = [{name: "Chandigarth", latitude:30.7333, longitude:76.7794},
{name: "Chandigarth2", latitude:30.7, longitude:76.7}]

function myMap() {
  var mapProp= {
    center:new google.maps.LatLng(30.7333,76.7794),
    zoom:10,
    disableDefaultUI: true
  };
  map = new google.maps.Map(document.getElementById("map"),mapProp);
  
  image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
 
  console.log(workerlist);
  for (var i = 0; i < workerlist.length; i++) {
    list = workerlist[i];
    price = jobprice;
    position = new google.maps.LatLng(list.latitude,list.longitude);
    addMarker(map,list,price,position,marker);
  }
  
}

function addMarker(map,list,price,position,marker){
  marker = new  google.maps.Marker({
    position: position,
    title: list.name,
    map: map,
    icon: image
  });
  var contentString = '<div class="mapBox">'+
  '<div class="content"> <h3>'+ list.name +
  '</h3>'+
  '<h6>(2.1 miles from the job venue)</h6>' +
  '<div class="rating"></div>'+
  '<p>Total cost to hire:</p>'+
  '<p>Rate: $' + price.Price + ' per hour</p>'+
  '<p>Total Cost: $'+ price.total_amount +'</p>'+
  '</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
  '</div>';

  marker.addListener('click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: contentString,
    })
    infowindow.open(map,marker)
    var that=this;
    google.maps.event.addListener(infowindow, 'domready', function() {
    $("#shortList").click(function(){
      image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
      that.setIcon(image);
    });
    });
  });
  
}

function shortList(){
  //  alert('clicked');
  //...