Parse div data into JavaScript function

Question

I currently have multiple divs on one page and each div serves a map on click. I get the lat long data from the div data attr and parse it into the function.

DEMO http://jsfiddle.net/x8dSP/2441/

I would like the ability to add more than one lat/long data sets? Current setup:

HTML

<div id="map" class="map map1" data-no="1" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map2" class="map map2" data-no="2" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map3" class="map map3" data-no="3" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map4" class="map map4" data-no="4" data-lat="40.747688" data-long="-74.004142"></div>

JS

var map = [];
function mapOneInitialize(index,lat,long) {
    var centerPosition = new google.maps.LatLng(lat,long)

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map[index] = new google.maps.Map($('div[data-no="'+index+'"]')[0], options);

    var marker = new google.maps.Marker({
        position: centerPosition,
        map: map[index]
    });
};

If I'm understanding correctly, get the tag by `id` and then set it's attribute with `getAttribute([attribute])` http://www.w3schools.com/jsref/met_element_getattribute.asp — zero298, Jan 23 '14 at 19:00
@zero298 How will this enable me to pass additional `lat/long` within same div across multiple divs with differing amount of `lat/long`? Could you provide an example? — , Jan 23 '14 at 19:02
Ah, I think I understand. I thought you wanted to collect the `lat` and `long` from the `div`, you want the **same** map to have multiple markers. Let me keep looking. Would this help at all: http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example ? — zero298, Jan 23 '14 at 19:04
Thanks, unfortunately that example loops through an array that has already been parsed into the function — , Jan 23 '14 at 19:31

score 0 · Answer 1 · edited May 23 '17 at 12:16

Ok, try this. Check the comments for clarity. Click on the red <div>s to add a marker at their coordinates. I got the basic idea from the question I linked you in the comments:

Google Maps JS API v3 - Simple Multiple Marker Example

HTML/JS

<!DOCTYPE html>
<html> 
   <head> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
      <title>Get Map Markers from Divs</title> 
      <style>
         #mainMap{
            width: 200px;
            height: 200px;
         }
         .map{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
         }
      </style>
      <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script>

         /**
          * Add a marker to our map
          * @param {google.maps.Map} map The map to append to
          * @param {Number} lat The lattitude
          * @param {Number} long The longitude
          * @returns {google.maps.Marker} The marker we made
          */
         function addMarker(map, lat, long) {
            return new google.maps.Marker({
               position: new google.maps.LatLng(lat, long),
               map: map
            });
         }

         /**
          * Create our google map setting its starting position
          * @param {DOM Element} mainMapDomElement What div to turn into a map
          * @returns {google.maps.Map}
          */
         function makeMainMap(mainMapDomElement) {
            return new google.maps.Map(mainMapDomElement, {
               zoom: 10,
               center: new google.maps.LatLng(40.747688, -74.004142),
               mapTypeId: google.maps.MapTypeId.ROADMAP
            });
         }

         /**
          * Get the lat and long attributes from our div
          * @param {DOM Element} The div to get the lat and long from
          * @returns {Object}
          */
         function getLatLong(domElement) {
            return {
               lat: domElement.getAttribute("data-lat"),
               long: domElement.getAttribute("data-long")
            };
         }

         /**
          * Have our divs listen for clicks to make them append to map
          * @param {DOM Element} domElement The element to add the listener to
          * @param {google.maps.Map} map The map to append to
          * @returns {undefined}
          */
         function addMapClickListener(domElement, map) {
            domElement.addEventListener("click", function() {
               var latLong = getLatLong(this);
               addMarker(map, latLong.lat, latLong.long);
            });
         }

         /**
          * Starting point for our map project
          * @returns {undefined}
          */
         function main() {
            var
                    // Get the div to append the map to
                    mainMapDiv = document.getElementById("mainMap"),
                    // Get all the elements with the "map" class that have our coords
                    mapDivs = document.getElementsByClassName("map"),
                    //Our main google map
                    mainMap,
                    // Holder for lat and long
                    latLong,
                    // Counter
                    i = 0;

            // Create our main map
            mainMap = makeMainMap(mainMapDiv);

            // Have our divs listen for clicks
            for (i = 0; i < mapDivs.length; i++) {
               addMapClickListener(mapDivs[i], mainMap);
            }
         }
      </script>
   </head> 
   <body onload="main();">
      <div id="mainMap"></div>
      <div id="map1" class="map" data-no="1" data-lat="40.747688" data-long="-74.004142"></div>
      <div id="map2" class="map" data-no="2" data-lat="40.757688" data-long="-74.014142"></div>
      <div id="map3" class="map" data-no="3" data-lat="40.767688" data-long="-74.024142"></div>
      <div id="map4" class="map" data-no="4" data-lat="40.777688" data-long="-74.034142"></div>
   </body>
</html>

Thanks,I tried this out with multiple values but i couldn't get it to work. I've opened another question which is clearer with examples — , Jan 23 '14 at 21:17

Parse div data into JavaScript function

1 Answers1