CODEWITHSUNDEEP
javascriptjquery
Gammer
Gammer

Reputation: 5608

jQuery data attribute value missing

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 ?

Upvotes: 0

Views: 1130

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 1

Related Questions