У меня есть результат со значком маркера, и я хочу заменить маркеры ценой.
Вот текущее изображение результата кода:
И я хочу вот такой результат:
Как я могу решить эту проблему?
Пожалуйста, помогите мнечтобы решить эту проблему.
Спасибо.
вот полный код ........................................................................................................
<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>