создать марку google, содержащую цену

Question

Я создаю сайт недвижимости с картой, показывающей дома с их ценой. Мне нужен маркер, как маркер, используемый на airbnb.com. Как мне это сделать? Я использую это:

мне нужно что-то вроде этого:

Answer 1

Вы можете создать собственный значок, как ниже один - использовать другой URL изображения для вашего необходимо.

var image = { 
      url: 'http://www.homedepot.com/catalog/swatchImages/35/04/04a604de-8b52-4cd8-a394-6286f00b438d_35.jpg', 
      // This marker is 35 pixels wide by 35 pixels high. 
      size: new google.maps.Size(35, 35), 
      // 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, 35) 
     }; 

Затем при создании маркеров, используйте изображение объекта как значка собственности. Для получения дополнительной информации см. maps API documentation for complex icons.

в действии в следующей сниппета:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(41.385932, 2.178678), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var image = { 
 
      url: 'http://www.homedepot.com/catalog/swatchImages/35/04/04a604de-8b52-4cd8-a394-6286f00b438d_35.jpg', 
 
      // This marker is 35 pixels wide by 35 pixels high. 
 
      size: new google.maps.Size(35, 35), 
 
      // 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, 35) 
 
     }; 
 
    var clickMarker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    draggable: true, 
 
    icon: image, 
 
    label: { 
 
     text: "50€", 
 
     color: 'black', 
 
     fontSize: '15px', 
 
     fontWeight: 'bold' 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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

Answer 2

Использование Google Maps, построенные в информационном окне. Вот пример в JQuery:

var infoContent = "<h1>Your Detailed Information Here</h1>"; 

var infoWindow = new google.maps.InfoWindow({ 
    content: infoContent 
}); 

marker.addListener('click', function() { 
    infoWindow.open(map, marker); 
}); 

Вы можете стилизовать информационное окно, как вам нравится с помощью CSS