javascript - Adding labels and icons on google maps markers -

how can add labels 2 markers when click on marker shows more details , how can change icon of "access point 2" different marker

function initialize() {        var mylatlng = new google.maps.latlng(-26.322402,31.142249),          map = new google.maps.map(document.getelementbyid('google-map-default'), {              zoom: 14,              center: mylatlng          }),          marker = new google.maps.marker({              position: mylatlng,              map: map,              title: "we here!"          });        var accesspoint1 = new google.maps.latlng(-26.315402,31.123924),          marker1 = new google.maps.marker({              position: accesspoint1,              map: map,              title: "access point 1"          });         var accesspoint2 = new google.maps.latlng(-26.316700,31.138043),          marker2 = new google.maps.marker({              position: accesspoint2,              map: map,              title: "access point 2"          });   }    google.maps.event.adddomlistener(window, 'load', initialize);

#google-map-default {  height: 200px;  }

<div id="google-map-default"></div>  <script src="https://maps.googleapis.com/maps/api/js"></script>

the code above in file called maps.mini.js working fine. need make modifications on specified above

here more robust , extendable solution makes use of array holding locations (markers), , single infowindow object. this, can add many locations need without having duplicate rest of code...

function initialize() {      var mylatlng = new google.maps.latlng(-26.322402, 31.142249);      var map = new google.maps.map(document.getelementbyid('map-canvas'), {      zoom: 13,      center: mylatlng    });      var infowindow = new google.maps.infowindow();      var marker = new google.maps.marker({      position: mylatlng,      map: map,      title: "we here!"    });      var locations = [        [new google.maps.latlng(-26.315402, 31.123924), 'access point 1', 'custom text 1'],      [new google.maps.latlng(-26.316700, 31.138043), 'access point 2', 'custom text 2']    ];      (var = 0; < locations.length; i++) {        var marker = new google.maps.marker({        position: locations[i][0],        map: map,        title: locations[i][1]      });        google.maps.event.addlistener(marker, 'click', (function(marker, i) {          return function() {          infowindow.setcontent(locations[i][2]);          infowindow.open(map, marker);        }        })(marker, i));    }  }    google.maps.event.adddomlistener(window, 'load', initialize);

#map-canvas {    height: 200px;  }

<div id="map-canvas"></div>    <script src="https://maps.googleapis.com/maps/api/js"></script>