Передать координаты, используя HTML 5 «data-» tag

Question

Мне нужно передать координаты в javascript из HTML 5, используя тег данных для использования в Google Maps.Я не очень хорош в Javascript, и я не могу найти решение нигде.Это HTML-код с ruby ​​(erb), координаты правильно доступны в HTML, если источник страницы просматривается:

<div id="google_map_section" data-latitude="<%= @place.latitude %>" data-longtitude ="<%= @place.longtitude %>"></div>

И JavaScript:

$(function initialize() {
    var latlng = new google.maps.LatLng(
        parseFloat($("#google_map_section").attr("data-latitude")),
        parseFloat($("#google_map_section").attr("data-longtitude"))
    );
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("google_map_section"),
    myOptions);
    var marker = new google.maps.Marker({
       position: myLatlng, 
       map: map
    });

});

Вопрос 1значения не передаются в JavaScript.Почему бы и нет?Должен ли я использовать:

 $("#google_map_section").data("latitude")?
 $("#google_map_section").attr("data-latitude")?
 $("#google_map_section").getAttribute("data-latitude")?

Я попробовал их все без удачи.Иногда карта отображается, но изображения не отображаются.

Вопрос 2. Нужно ли использовать onload = "initialize ()" для тега body или его можно использовать для любого тега?

Answer 1

Использование attr должно работать нормально:

Рабочий пример

Вам не нужно использовать встроенный обработчик события onload, однако вместо этого ваш метод инициализации должен быть анонимнымименованного метода.

Заменить:

$(function initialize() {

на:

$(function() { // Shortcut for $(document).ready(function(){});

Answer 2

Для № 1 $("#google_map_section").attr('data-latitude') должно работать.

Для # 2, вы должны сделать это так:

$(document).ready(function() {
  var latlong // etc.
});

, который запустит этот javascript, когда документ будет готов (т.е. когда страница закончит загрузку и все объекты DOM будут отрисованы) Я предполагаю, что именно поэтому ответ на # 1 не работал, потому что объект google_map_section еще не был загружен.