title: how to set price with marker in google maps
body: <p>I have result with a marker icon and I want to replace the markers with a price.</p>
  
  <p>Here is the current code result image:</p>
  
  <p><a href="https://i.stack.imgur.com/cZoY9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cZoY9.jpg" alt="enter image description here"></a></p>
  
  <p>And I want like this result:</p>
  
  <p><a href="https://i.stack.imgur.com/ksaVC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ksaVC.jpg" alt="enter image description here"></a></p>
  
  <p>How can I fix this issue?</p>
  
  <p>Please help me to fix this issue.</p>
  
  <p>Thanks.</p>
  
  <p>here is the complete code
  ........................................................................................................</p>
  
  <pre><code>&lt;style&gt;
            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;
            }
          &lt;/style&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"&gt;&lt;/script&gt;
  
   &lt;div id="map"&gt;&lt;/div&gt;
      &lt;ul id="list-view"&gt;&lt;/ul&gt;
      &lt;script&gt;
  
  
        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
          // &lt;area&gt; 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 &lt; 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 &lt; 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 = [];
        }
  
      &lt;/script&gt;
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"&gt;&lt;/script&gt;
      &lt;script id="info-window-template" type="text/x-handlebars-template"&gt;
        &lt;div class="entry"&gt;
          &lt;img src="{{picture}}"&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;p&gt;{{address}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;script id="listing-item-template" type="text/x-handlebars-template"&gt;
        &lt;div class="listing-item" href="#"&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;p&gt;{{address}}&lt;/p&gt;
        &lt;/div&gt;      
      &lt;/script&gt;
  </code></pre>