Set Google Map Marker Points From DOM Elements Array

Question

I'm trying to make a Google Map from some DOM items with data attributes. I'm using jQuery to make an array from these data attributes and I can make the array however, I'm having trouble passing this array as a variable into my Google Map.

Here's a fiddle: https://jsfiddle.net/ozouat33/

My HTML:






  
  Location 1 Go
  


  
  Location 2 Go
  


  
  Location 3 Go
  


  
  Location 4 Go
  


  
  Location 5 Go

My JavaScript:

// Make Plot Array. Format is Title, Latitude, Longitude, ID, Tooltip HTML

// This is the function that I'm using to create a two-dimensional array based on my listed DOM items. The console log shows the array  correctly, but 
function makeMapPlotPoints() {

    // Set marker from results list and empty plot point array
    var mapPlotPointDOM = $( ".listing-item" );
    var mapPlotPointArr = [];

    $(mapPlotPointDOM).each(function(){ 
        mapPlotPointArr.push([
            $(this).data( "marker-title" ), 
            $(this).data( "marker-lat" ),
            $(this).data( "marker-lng" ),
            $(this).data( "marker-id" ),
            $(this).find('map-infowindow-html').html(),
        ]); 
    });
    console.log(mapPlotPointArr);
}

var map;
var markers = []; // Create a marker array to hold markers

// This is the static array that I'm using to create the map
var mapMarkers = [
    ['Location 1', 41.8333925, -88.0123393, 1],
    ['Location 2', 41.8333925, -88.0133393, 2],
    ['Location 3', 41.8333925, -88.0143393, 3],
    ['Location 4', 41.8333925, -88.0153393, 4],
    ['Location 5', 41.8333925, -88.0163393, 5]
];

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow(); 
var center = {lat: 41.8333925, lng: -88.0123393}; // need to figure out how to get dynamically

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
        var mapMarkerItem = locations[i];
        var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: mapMarkerItem[0],
            zIndex: mapMarkerItem[3]
        });

        // Set Map Bounds to Auto-center
        bounds.extend(myLatLng);
        map.fitBounds(bounds);

        // Push marker to markers array
        markers.push(marker);

        // Marker Info Window?tooltip
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
        })(marker, i));

    }
}



function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i=0; i



Essentially, I want my map to use the locations set from the array created by 'makeMapPlotPoints()' instead of the array from the variable 'mapMarkers.'

Additional note: for HTML markers, please refer to: https://jsfiddle.net/yh2ucyq7/3/

geocodezip · Accepted Answer

you need to include JQuery (at least in your fiddle).
you need to call the function to generate the array.
you need to pass the generated array into the setMarkers function.

When I do that it works (reads the markers from the elements in the DOM): updated jsfiddle

code snippet:

// ** This is the function that I'm using to create a two-dimensional array based on my listed DOM items. The console log shows the array correctly, but I have no idea how to pass this array as a variable into the Google Map ** 
function makeMapPlotPoints() {

  // Set marker from results list and create empty plot point array
  var mapPlotPointDOM = $(".listing-item");
  var mapPlotPointArr = [];

  $(mapPlotPointDOM).each(function() {
    mapPlotPointArr.push([
      $(this).data("marker-title"),
      $(this).data("marker-lat"),
      $(this).data("marker-lng"),
      $(this).data("marker-id"),
      $(this).find('map-infowindow-html').html(),
    ]);
  });
  console.log(mapPlotPointArr);
  setMarkers(mapPlotPointArr);
}

var map;
var markers = []; // Create a marker array to hold markers

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
  lat: 41.8333925,
  lng: -88.0123393
}; // need to figure out how to get dynamically

function setMarkers(locations) {

  for (var i = 0; i < locations.length; i++) {
    var mapMarkerItem = locations[i];
    var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      animation: google.maps.Animation.DROP,
      title: mapMarkerItem[0],
      zIndex: mapMarkerItem[3]
    });

    // Set Map Bounds to Auto-center
    bounds.extend(myLatLng);
    map.fitBounds(bounds);

    // Push marker to markers array
    markers.push(marker);

    // Marker Info Window?tooltip
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

  }
}



function reloadMarkers() {

  // Loop through markers and set map to null for each
  for (var i = 0; i < markers.length; i++) {

    markers[i].setMap(null);
  }

  // Reset the markers array
  markers = [];

  // Call set markers to re-add markers
  makeMapPlotPoints();
}

function initialize() {

  var mapOptions = {
    zoom: 9,
    center: new google.maps.LatLng(41.8333925, -88.0123393),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scaleControl: true,
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  makeMapPlotPoints();
  // setMarkers(mapMarkers);


  // Bind event listener on button to reload markers
  document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

#map-canvas {
  height: 200px;
  width: 100%;
}








  
    Location 1 Go
  


  
    Location 2 Go
  


  
    Location 3 Go
  


  
    Location 4 Go
  


  
    Location 5 Go

Set Google Map Marker Points From DOM Elements Array

Answers (1)

Related Questions