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 ?

Answer 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');

Answer 2

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.