Simple Markers

by Greg

HTML

<div class="large-acf-map">
<div class="marker" data-lat="-25.363" data-lng="131.044" data-marker="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134893/pin-red.svg"></div>
<div class="marker" data-lat="-25.393" data-lng="131.044" data-marker="http://maps.google.com/mapfiles/ms/micons/blue.png"></div>

</div>

  <!-- Replace the value of the key parameter with your own API key. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
  </script>
  <script type="text/javascript">
    (function($) {
      function render_map($el) {

        // var
        var $markers = $el.find('.marker');

        // vars
        var args = {
          zoom: 16,
          center: new google.maps.LatLng(0, 0),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          //mapTypeId : google.maps.MapTypeId.HYBRID
        };

        // create map               
        var map = new google.maps.Map($el[0], args);

        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function() {

          add_marker($(this), map);

        });

        // center map
        center_map(map);

      }

      // create info window outside of each - then tell that singular infowindow to swap     content based on click
      var infowindow = new google.maps.InfoWindow({
        content: ''
      });

      /*
       *  add_marker
       *
       *  This function will add a marker to the selected Google Map
       *
       *  @type    function
       *  @date    8/11/2013
       *  @since   4.3.0
       *
       *  @param   $marker (jQuery element)
       *  @param   map (Google Map object)
       *  @return  n/a
       */

      function add_marker($marker, map) {
        // var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

        // create marker
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
         ...

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
.large-acf-map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}