how to set price with marker in google maps

Question

I have result with a marker icon and I want to replace the markers with a price.

Here is the current code result image:

And I want like this result:

How can I fix this issue?

Please help me to fix this issue.

Thanks.

here is the complete code ........................................................................................................

<style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            width: 60%;
            height: 100%;
            float: left;
            margin:0;
          }
          #list-view{
            width: 30%;
            float: right;
            margin:0;
          }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

 <div id="map"></div>
    <ul id="list-view"></ul>
    <script>


      bindEvent = function(element, type, handler) {
          if (element.addEventListener) {
              element.addEventListener(type, handler, false);
          } else {
              element.attachEvent('on'+type, handler);
          }
      };

      //Initialize the global vars markers and map
      var map;
      var markers = [];
      var infoWindows = [];
      var infoWindow;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: -33.9, lng: 151.2}
        });
        setMarkers(map);
      }

      // Data for the markers consisting of a name, a LatLng and a zIndex for the
      // order in which these markers should display on top of each other.

      var places = [
        {
          id: 87382,
          title: "1315 Platine Hill",
          address: "San Antonio, Texas 78287 | Bella Vista",
          picture: "picture.png",
          price: "415,000",
          beds: 5,
          baths: 4,
          area: 5434,
          lat: -33.890542,
          lng: 151.274856
        },
        {
          id: 83823,
          title: "39 Oriente",
          address: "San Antonio, Texas 323 | Lynda Vista",
          picture: "picture.png",
          price: "415,000",
          beds: 5,
          baths: 4,
          area: 5434,
          lat: -33.923036,
          lng: 151.259052
        }
      ];


      function setMarkers(map) {
        // Adds markers to the map.

        // Marker sizes are expressed as a Size of X,Y where the origin of the image
        // (0,0) is located in the top left of the image.

        // Origins, anchor positions and coordinates of the marker increase in the X
        // direction to the right and in the Y direction down.
        var icon = {
          url: 'home.png',
          // This marker is 20 pixels wide by 32 pixels high.
          size: new google.maps.Size(32, 37),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(0, 32)
        };
        // Shapes define the clickable region of the icon. The type defines an HTML
        // <area> element 'poly' which traces out a polygon as a series of X,Y points.
        // The final coordinate closes the poly by connecting to the first coordinate.
        var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18, 1],
          type: 'poly'
        };

        var marker, i, listItems = [];

        infoWindow = new google.maps.InfoWindow();

        for (i = 0; i < places.length; i++) {

          var place = places[i];

          //Markers
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(place.lat,place.lng),
            map: map,
            icon: icon,
            ///shape: shape,
            title: place.title
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i, place, infoWindow) {

            return function() {
              var source   = document.getElementById("info-window-template").innerHTML;
              var template = Handlebars.compile(source);

              infoWindow.setContent(template(place));
              infoWindow.open(map, marker);
            }

          })(marker, i, place, infoWindow));




          //Listing
          var source = document.getElementById("listing-item-template").innerHTML;
          var template = Handlebars.compile(source);
          var node = document.createElement("li");
          node.innerHTML = template(place);          

          listItem = document.getElementById("list-view").appendChild( node )

          listItems[i] = listItem;

          bindEvent( listItems[i], 'click', (function(map,marker,place,infoWindow){

            return function(e){
              e.preventDefault();
              var source   = document.getElementById("info-window-template").innerHTML;
              var template = Handlebars.compile(source);

              infoWindow.setContent(template(place));
              infoWindow.open(map,marker);
            }

          })(map,marker,place,infoWindow));

          markers.push(marker);
        }


      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    <script id="info-window-template" type="text/x-handlebars-template">
      <div class="entry">
        <img src="{{picture}}">
        <h1>{{title}}</h1>
        <p>{{address}}</p>
      </div>
    </script>

    <script id="listing-item-template" type="text/x-handlebars-template">
      <div class="listing-item" href="#">
        <h1>{{title}}</h1>
        <p>{{address}}</p>
      </div>      
    </script>

Answer 1

You are creating an icon:

var icon = {
      url: 'home.png',
...

and using it here for each place:

//Markers
marker = new google.maps.Marker({
 position: new google.maps.LatLng(place.lat,place.lng),
 map: map,
 icon: icon,
 ///shape: shape,
 title: place.title
});

So every marker has the same icon.

You should use "picture" property of object to create the icon (or other property...).

Fixed in easy way just to let you understand try this:

  bindEvent = function(element, type, handler) {
      if (element.addEventListener) {
          element.addEventListener(type, handler, false);
      } else {
          element.attachEvent('on'+type, handler);
      }
  };

  //Initialize the global vars markers and map
  var map;
  var markers = [];
  var infoWindows = [];
  var infoWindow;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: -33.9, lng: 151.2}
    });
    setMarkers(map);
  }

  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other.

  var places = [
    {
      id: 87382,
      title: "1315 Platine Hill",
      address: "San Antonio, Texas 78287 | Bella Vista",
      picture: "home.png", // changed
      price: "415,000",
      beds: 5,
      baths: 4,
      area: 5434,
      lat: -33.890542,
      lng: 151.274856
    },
    {
      id: 83823,
      title: "39 Oriente",
      address: "San Antonio, Texas 323 | Lynda Vista",
      picture: "picture.png", // change!
      price: "415,000",
      beds: 5,
      baths: 4,
      area: 5434,
      lat: -33.923036,
      lng: 151.259052
    }
  ];


  function setMarkers(map) {

    var marker, i, listItems = [];
    infoWindow = new google.maps.InfoWindow();
    for (i = 0; i < places.length; i++) {
      var place = places[i];
      // icon
      var icon = {
        url: places[i].picture, // the picture!
        size: new google.maps.Size(32, 37),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 32)
      };

      //marker
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(place.lat,place.lng),
        map: map,
        icon: icon,
        title: place.title
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i, place, infoWindow) {

        return function() {
          var source   = document.getElementById("info-window-template").innerHTML;
          var template = Handlebars.compile(source);

          infoWindow.setContent(template(place));
          infoWindow.open(map, marker);
        }

      })(marker, i, place, infoWindow));




      //Listing
      var source = document.getElementById("listing-item-template").innerHTML;
      var template = Handlebars.compile(source);
      var node = document.createElement("li");
      node.innerHTML = template(place);          

      listItem = document.getElementById("list-view").appendChild( node )

      listItems[i] = listItem;

      bindEvent( listItems[i], 'click', (function(map,marker,place,infoWindow){

        return function(e){
          e.preventDefault();
          var source   = document.getElementById("info-window-template").innerHTML;
          var template = Handlebars.compile(source);

          infoWindow.setContent(template(place));
          infoWindow.open(map,marker);
        }

      })(map,marker,place,infoWindow));

      markers.push(marker);
    }


  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }