Change Google Map Marker Icon When Clicking Button Inside Infowindow

March 31, 2024 Post a Comment

I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please

Solution 1:

Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.

google.maps.event.addListener(infowindow, 'domready', function() {
  $("#shortList").click(function() {
    // code here to change the icon
  });
});

If you want the icon of the marker to change, you need to call .setIcon on the marker:

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

proof of concept fiddle

Baca Juga

code snippet:

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
  }
]

functionmyMap() {
  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);
  }

}

functionaddMarker(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);
      });
    });
  });

}

functionshortList() {
  //  alert('clicked');// infowindow.close();//marker.setIcon(image1);
}

/* 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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html><head><title>Info Windows</title><scriptsrc="https://polyfill.io/v3/polyfill.min.js?features=default"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly"defer></script><!-- jsFiddle will insert css and js --></head><body><divid="map"></div></body></html>

JavaScript Sample

Change Google Map Marker Icon When Clicking Button Inside Infowindow

Solution 1:

Post a Comment for "Change Google Map Marker Icon When Clicking Button Inside Infowindow"