Good day everyone. I study react-yandex-maps. I am trying to deduce a hint or balun as follows:

const mapState = { center: [56.85, 53.2], zoom: 12 }; const placeMark = { geometry: [56.848217, 53.236675], properties: { hintContent: 'Это хинт', balloonContent: 'Это балун' } } class MapContainer extends Component { render() { return ( <YMaps> <Map state={mapState}> <Placemark {...placeMark} /> </Map> </YMaps> ); } }

I hover or click on the placemark on the maps and nothing happens. Please tell me what could be the matter?

    2 answers 2

    In general, I answer my own question. In order for the tooltips to appear, you need to connect two modules: modules={['geoObject.addon.balloon', 'geoObject.addon.hint']} . And then the working example will be something like this:

     const mapState = { center: [56.85, 53.2], zoom: 12 }; const placeMark = { geometry: [56.848217, 53.236675], properties: { hintContent: 'Это хинт', balloonContent: 'Это балун' } modules: { ['geoObject.addon.balloon', 'geoObject.addon.hint'] } } class MapContainer extends Component { render() { return ( <YMaps> <Map state={mapState}> <Placemark {...placeMark} /> </Map> </YMaps> ); } }

    Maybe someone will come in handy)

    More details are written here .

    • Thank you so much! Straight rescued modules: {['geoObject.addon.balloon', 'geoObject.addon.hint']} - Alexander Zanko

    Here's an example of implementation)

     ymaps.ready(initq); function initq() {var myMapw=new ymaps.Map('map',{center:[56.85, 53.2],zoom:12}); var myPlacemarkw=new ymaps.Placemark([56.848217, 53.236675], { hintContent: 'Stack Overflow', balloonContent:'Stack Overflow на русском' }, { iconLayout:'default#image', iconImageHref:'https://avatars.mds.yandex.net/get-yablogs/51778/file_1511958710909/orig', iconImageSize:[100,36], iconImageOffset:[-50,-18] }); myMapw.geoObjects.add(myPlacemarkw)}; 
     div#map { width: 100%; height: 100%; position: fixed; } 
     <script type="text/javascript" src='https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU'></script> <div id="map"></div>

    another example on react-yandex-maps

     import React from 'react'; import { YMaps, Map, Placemark } from 'react-yandex-maps'; import myIcon from 'https://avatars.mds.yandex.net/get-yablogs/51778/file_1511958710909/orig'; const mapState = { center: [56.848217, 53.236675], zoom: 12 }; const IconCustomImage = () => <YMaps> <Map state={mapState}> <Placemark geometry={{ coordinates: mapState.center, }} properties={{ hintContent: 'Stack Overflow', balloonContent: 'Stack Overflow на русском', }} options={{ iconLayout: 'default#image', iconImageHref: myIcon, iconImageSize: [100, 36], iconImageOffset: [-50, -18], }} /> </Map> </YMaps>; export default IconCustomImage;
    • one
      I think the question was how to use yandex-maps in conjunction with react . - Stepan Kasyanenko
    • The fact is that, as shown above, the icon is displayed, but neither the pop-up hint nor the balun appears ( - Vadim Pashaev
    • added for react-yandex-maps - GENESIS
    • Did you run this code yourself? Do you have pop-up items? - Vadim Pashaev
    • gribnoysup.imtqy.com/react-yandex-maps/#/sandbox/geoobjects/… - GENESIS