jQuery data attribute value missing

Question

I have two data attributes in <option>, Which have the lat and lng for the map:

<option id="riderInfo" data-lat="" data-lng=""></option>

Jquery :

var lat = $("#riderInfo").val($(this).data('lat'));
var lng = $("#riderInfo").val($(this).data('lng'));

I am printing its value :

console.log(lat)

The actual code to get value from the select and give to the map, So map will chnage to the given location.

$(document).ready(function(){
  var lat = $("#riderInfo").val($(this).data('lat'));
  var lng = $("#riderInfo").val($(this).data('lng'));
  console.log(lat);

  google.maps.event.addDomListener(window, 'load', init);
  function init() {
     var locations = [
        ['Rider', 33.686073, 73.0175017, 3]
      ];
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(33.68, 73.01),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var infowindow = new google.maps.InfoWindow();
      var marker, i;
      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
  }
});

Result of console.log(lat) is :

[option#riderInfo, context: document, selector: "#riderInfo"]

What am i missing ?

Your question is not at all clear. What is this? What is the value of data-lat and data-lng What is that result supposed to be showing, and how are you checking it? What is the HTML? Why are you setting the same value twice? The first call is completely redundant. — Rory McCrossan
– Rory McCrossan, Commented Sep 13, 2017 at 14:09
@RoryMcCrossan I have updated the question, And you were right the question was not clear — Gammer
– Gammer, Commented Sep 13, 2017 at 14:17
#riderInfo can't be 'this' I assume you just want to switch it to the value, so try $("#riderInfo").val($('#riderInfo').data('lat')) — nodws
– nodws, Commented Sep 13, 2017 at 14:18
Your first two lines are confusing. Are you trying to get or set the value? — Rory McCrossan
– Rory McCrossan, Commented Sep 13, 2017 at 14:18
@RoryMcCrossan I want to get the data and give it to the map. — Gammer
– Gammer, Commented Sep 13, 2017 at 14:19

Shiladitya · Accepted Answer · 2017-09-13 14:37:35Z

Here you go with a solution

$(document).ready(function(){
  var lat = parseFloat($("#riderInfo").data('lat'));
  var lng = parseFloat($("#riderInfo").data('lng'));
  console.log(lat);

  google.maps.event.addDomListener(window, 'load', init);
  function init() {
     var locations = [
        ['Rider', lat, lng, 3]
      ];
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var infowindow = new google.maps.InfoWindow();
      var marker, i;
      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
  }
});

Get the data values of lat, lng into the variable & use it in map function

Hope this will help you.

Milind Anantwar · Accepted Answer · 2017-09-13 15:00:27Z

1

By setting the value using jquery, jquery object of element is returned and set as variable. you should be using:

var lat = $('#riderInfo').data('lat');
var lng = $('#riderInfo').data('lng');

edited Sep 13, 2017 at 15:00

answered Sep 13, 2017 at 14:10

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

3 Comments

Milind Anantwar Over a year ago

No. $("#riderInfo").val($(this).data('lat')); will return jquery object of element "#riderInfo.

Milind Anantwar Over a year ago

You can log this in console $('input:eq(1)').val('koala') and check

Rory McCrossan Over a year ago

Ah I see what you're saying. We're coming at this in different ways. You're assuming OP is trying to get the data value in lat. I was assuming they're trying to set the val() of the element. It's really not clear what the OP is trying to do.

Collectives™ on Stack Overflow

jQuery data attribute value missing

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related