How to Position close option in Map marker tool tip

2 posts, 0 answers
  1. Dinesh
    Dinesh avatar
    3 posts
    Member since:
    Mar 2013

    Posted 14 Aug 2014 Link to this post

    I am using KendoMap control.

    I just want to position the close option in tool tip of Map marker.How to do this.?
    And the code , I'm using is..........
    <script type="text/javascript">
        var markers_array = [];
        function create_markers_array_from_data() {
         $.ajax({
              type: "POST",
              url: '@Url.Action("GetDemographyDetails", "Map")',
              data: {
                  selectedChannels: '@Model.ParameterNames',
                  channelids:'@Model.ParameterIds'
              },
              async: false,
              dataType: "json",
              success:
                  function (response) {
                      if ((response == "\"Session Expired\"") || (response == "Session Expired")) {
                          location.href = kendo.format('@(Server.UrlDecode(Url.Action("Account", "Login")))');
                      }
                      for (var i = 0; i < response.length; i++) {
                          markers_array.push({
                              location: [parseFloat(response[i].Latitude), parseFloat(response[i].Longitude)],
                              tooltip: {
                                  content: response[i].Content,
                                  close: {
                                       position:"left"     
                                  }
                               },
                               shape: response[i].CompanyStatus
                          })
                      }
                  }
          });

            return markers_array;
        }
        $("document").ready(function()
        {
            $("#map").kendoMap({
                center: [21.0, 79.4667],
                zoom: 5,
                layers: [{
                     type: "tile",
                     urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                     attribution: "&copy; OpenStreetMap"
                     }],
                 markerDefaults: {
                     shape: "GREENMARKER"
                 },
                 markers: create_markers_array_from_data()
                 
            });
        });
      
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 15 Aug 2014 Link to this post

    Hi Dinesh,

    In this case you need to use position: absolute with top/bottom and left/right. You can examine this live exampe.

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top