Google Maps multiple markers, through data-attr

PoC to test how to use data-attribute to feed google maps with multiple markers

by osserpse

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>

<!-- https://api.jquery.com/data/ -->
<p class="text" data-location='["<b>Billingmarks</b>, öppet 12-19", "59.284513", "15.214317599999958", "Shopping"]'>
  Billingmarks
</p>
<p class="text" data-location='["Harrys","59.275263","15.213411","Mode"]'>
  Harrys
</p>
<div id="map" style="width: 500px; height: 400px;"></div>

JavaScript

jQuery(document).ready(function ($) {

  var locations = [];
 
 // To use simple custom marker (not used in this PoC)
 // https://developers.google.com/maps/documentation/javascript/examples/icon-simple
 
 // https://api.jquery.com/each/
 	$( ".text" ).each(function(index) {
		var data = $(this).data();
  	locations.push(data.location);
	  console.log('name: ' + locations[index][0]);
	  console.log('lat: ' + locations[index][1]);
	  console.log('lgn: ' + locations[index][2]);
	  console.log('section: ' + locations[index][3]);
	});

// Specify features and elements to define styles.
// https://developers.google.com/maps/documentation/javascript/styling
// http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
  var styleArray = [
    {
      featureType: "all",
      stylers: [
       { saturation: -80 }
      ]
    },{
      featureType: "road.arterial",
      elementType: "geometry",
      stylers: [
        { hue: "#559900" },
        { saturation: 50 }
      ]
    },{
      featureType: "poi.business",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

	// alt syntax: var orebro = new google.maps.LatLng(59.275263, 15.213411);
	var orebro = {lat: 59.275263, lng: 15.213411};
	var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: orebro,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    	styles: styleArray
    });

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

});