Bert lucas Bert lucas - 1 month ago 10
Javascript Question

Create an array from list of articles tag's data attribute

I want to create an array that I will assign to a marker variable, this is to display markers in google maps. but all that I have is the data attribute from article tag.

this what I'm working on: http://jsfiddle.net/gilbertlucas46/qpvdrjh8/7/
if you check the console it will show you this
enter image description here

this is what I want to achieve

var markers = [
['Palace of Westminster, London', -27.4687253, 153.0273166],
['Palace of Westminster, London', -27.4687253, 153.0273166]
];


this is the code that I have to display markers in google maps

jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// var latitude= $('div.locations').find('.location').attr("data-latitude");
// var longitude= $('div.locations').find('.location').attr("data-longitude");
// var coor = latitude + ' , ' + longitude;
var latitude,
longitude,
dataName,
coor,
markers;

$(".location").each(function(){
latitude = $(this).attr('data-latitude');
longitude = $(this).attr('data-longitude');
dataName = $(this).attr('data-name');
coor = latitude + ' , ' + longitude;
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = new Array([dataName, latitude, longitude]);
console.log(markers);


// Info Window Content
var infoWindowContent = [
// ['<div class="info_content">' +
// '<h3>London Eye</h3>' +
// '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
// ['<div class="info_content">' +
// '<h3>Palace of Westminster</h3>' +
// '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
// '</div>']
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});

// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
});

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(10);
google.maps.event.removeListener(boundsListener);
});
}

Answer

Try to use push to add it to the array and set the variable outside the loop?

http://jsfiddle.net/qjd23gnm/

I got it into one variable. Check the fiddle to see if it what you need.

      var markers = [];

      $(".location").each(function() {
        latitude = $(this).attr('data-latitude');
        longitude = $(this).attr('data-longitude');
        dataName = $(this).attr('data-name');
        <!--   coor = latitude + ' , ' + longitude; -->
        // Multiple Markers
        markers.push([dataName, latitude, longitude]);

      });
      console.log(markers);