Поместите номер на предопределенные формы маркера на карте Google.

Я использую предопределенные маркеры Google (круглая форма). Я хочу поставить число (от 1 до 100) на этот маркер, но не могу этого сделать.

Я проверил эту ссылку http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000, но на закрепленном маркере будет отображаться номер. Могу ли я каким-либо образом передать свой круговой маркер в Google Chart API?

Вот код моего маркера:

var markerIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#000',
    fillOpacity: .9,
    scale: 10,
    strokeColor: '#000',
    strokeWeight: 1
  };

 var marker = new google.maps.Marker({
        icon: markerIcon,
        position: new google.maps.LatLng(latitude,longitude),
        map: map,
    });

FIDDLE


person alwaysLearn    schedule 21.08.2014    source источник
comment
jsfiddle.net/cy55boru/6 попробуйте это для начала. Он не круглый, но даст вам отправную точку. Теперь в соответствии с булавкой, которую вы поместили на карту, скажем, под номером 45, измените текстовый параметр на 45: icon :dummyimage.com/32x32/000/fff&text=45. Также вы можете создать свой собственный генератор маркеров с круглым значком и PHP+GD. Передайте параметр URL-адресу, получите его с помощью $_GET[text] и выведите с помощью заголовка ('');   -  person Theodoros80    schedule 21.08.2014


Ответы (1)


Начиная с версии 3.21 (в настоящее время «экспериментальная» версия, v=3.exp), помеченные маркеры изначально поддерживаются Google Maps Javascript API v3.

обновлена ​​скрипта

фрагмент кода:

$(document).ready(function() {
   var params = {
     'lat': $('#map_canvas').data('lat'),
     'long': $('#map_canvas').data('long')
   };
   google.maps.event.addDomListener(window, 'load', initialize(params));

 });


 function initialize(coordinates) {
   var mapOptions = {
     center: new google.maps.LatLng(coordinates.lat, coordinates.long),
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
   };

   var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   var markerIcon = {
     path: google.maps.SymbolPath.CIRCLE,
     fillColor: '#000',
     fillOpacity: .9,
     scale: 10,
     strokeColor: '#000',
     strokeWeight: 1
   };


   var marker = new google.maps.Marker({
     icon: markerIcon,
     position: new google.maps.LatLng(coordinates.lat, coordinates.long),
     map: map,
     label: {
       color: 'white',
       text: '1'
     }
   });

   marker.setMap(map);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:600px;height:300px" data-lat='40.8152' data-long='-73.0455'></div>

person geocodezip    schedule 28.07.2015