Beautiful Gallery Post.

Многие веб-разработчики и создатели собственных сайтов используют на своих сайтах яндекс-карты. Это может быть в разделе контакты или схемы как добраться.

Но при использовании стандартного конструктора карт Яндекс, можно выбрать только стандартные иконки.

1. Для примера подготовим файл с самой иконкой. Размер картинки 55 * 52 px, можно использовать тени.

2. Так же необходимо подгружать библиотеки Яндекса





 

 

 

Пример кода:



$(document).ready(function() {
$(".contact-map").length && ymaps.ready(function () {
            var myMap = new ymaps.Map("contact-map", {
                center: [55.766258, 37.610826],
                zoom: 16,
                controls: []
            }), myGeoObject = new ymaps.GeoObject({
                geometry: {
                    type: "Point",
                    coordinates: [55.766258, 37.610826]
                },
                //properties: {
                //    iconContent: "TWINS FUND",
                //    hintContent: "Благотварительный фонд"
                //},
                   preset: 'islands#blackStretchyIcon'
            // Метку можно перемещать.

            }),
                myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
                clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32
//            hintContent: 'Собственный значок метки',
//            balloonContent: 'Это красивая метка'

        }
            , {
                draggable: true, // и их можно перемещать
          coordinates: [55.725118, 37.682145],
//            // Опции.
//            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
//            // Своё изображение иконки метки.
            iconImageHref: '/static/image/brain.png',
//            // Размеры метки.
            iconImageSize: [55, 52],
//            // Смещение левого верхнего угла иконки относительно
//            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -55]
        }
        );

   // myMap.geoObjects.add(myGeoObject);
            myMap.geoObjects.add(myPlacemark);
        })
    })

About the Author

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor neque. Nullam lobortis, sapien vitae lobortis tristique.

Comments ( 5 )

  1. admin
    January 15 , 2014 at 10:00 pm
    Reply

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi adipiscing gravida odio, sit amet suscipit risus ultrices eu. Fusce viverra neque at purus laoreet consequat. Vivamus vulputate posuere nisl quis consequat.

    • admin
      January 15 , 2014 at 10:00 pm
      Reply

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi adipiscing gravida odio, sit amet suscipit risus ultrices eu. Fusce viverra neque at purus laoreet consequat. Vivamus vulputate posuere nisl quis consequat.

      • admin
        January 15 , 2014 at 10:00 pm
        Reply

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi adipiscing gravida odio, sit amet suscipit risus ultrices eu. Fusce viverra neque at purus laoreet consequat. Vivamus vulputate posuere nisl quis consequat.

    • admin
      January 15 , 2014 at 10:00 pm
      Reply

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi adipiscing gravida odio, sit amet suscipit risus ultrices eu. Fusce viverra neque at purus laoreet consequat. Vivamus vulputate posuere nisl quis consequat.

  2. admin
    January 15 , 2014 at 10:00 pm
    Reply

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi adipiscing gravida odio, sit amet suscipit risus ultrices eu. Fusce viverra neque at purus laoreet consequat. Vivamus vulputate posuere nisl quis consequat.

Leave a reply

 Prev post

Next post