Simple Markers

by Lawrence Ross

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,
        icon: {
          url: $marker.attr('data-marker'),
          scaledSize: new google.maps.Size(30,...

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