Load Google Map with WP Enqueue

Adding a google map to your wordpress website? Want to do it the coding way. Theres a couple things you should be aware of.

• Ensure the API loads before your map init script.
• Use the dependency parameter of the wp_enqueue_script and set the map api script as a dependency of the init script.

** Prerequistes **

• Already have your google maps api key

Enqueue Scripts

function load_google_script(){
  $google_api_script = "https://maps.googleapis.com/maps/api/js?key=your_key";
  wp_register_script( 'google_api_script', $google_api_script, '', '', true);
  wp_register_script( 'google_map_init', get_stylesheet_directory_uri() . '/assets/js/vendor/maps.js', array( 'google_api_script', 'jquery' ) , '', true);
  wp_enqueue_script( 'google_map_init' );
  wp_enqueue_script( 'google_api_script' );
}
add_action('wp_enqueue_scripts', 'load_google_script'); ?>

Map JS

Script for setting markers and map style

jQuery(function ($) {
  function render_map($el) {
    // var
    var $markers = $el.find(".marker");
    // vars
    var args = {
      scrollwheel: false,
      zoom: 16,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
        {
          stylers: [
            {
              saturation: -100,
            },
          ],
        },
      ],
    };
    // 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);
  }

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

    var image = $marker.attr("data-image")
      ? $marker.attr("data-image")
      : DIR.home_dir + "/assets/img/map-marker.png";
    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: image,
    });
    // add to array
    map.markers.push(marker);
    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html(),
      });
      // show info window when marker is clicked
      google.maps.event.addListener(marker, "click", function () {
        infowindow.open(map, marker);
      });
    }
  }

  /*
   *  center_map
   */

  function center_map(map) {
    // vars
    var bounds = new google.maps.LatLngBounds();
    // loop through all markers and create bounds
    $.each(map.markers, function (i, marker) {
      var latlng = new google.maps.LatLng(
        marker.position.lat(),
        marker.position.lng()
      );
      bounds.extend(latlng);
    });
    // only 1 marker?
    if (map.markers.length == 1) {
      // set center of map
      map.setCenter(bounds.getCenter());
      map.setZoom(16);
    } else {
      // fit to bounds
      map.fitBounds(bounds);
    }
  }

  //render the map into your div using the class as the reference
  $(".acf-map").each(function () {
    render_map($(this));
  });
});

Google map not working

Google map not working in chrome or safari but working in firefox due to google not defined error

Use a callback function

Try using a callback function appended to the load requesting of the google maps api. this will ensure your map does not load before the google api causing an error.

<script src="https://maps.googleapis.com/maps/api/js?key=yourApiKeyGoesHere&callback=render_map"></script>

In this case render_map is the function for initialising your google map

More Info

youtube google maps v3 api