Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin tommcfarlin/1-template-maps.php Secret
Last active Jul 14, 2018

Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
[WordPress] Using the Google Maps JavaScript API within the context of WordPress
Raw
1-template-maps.php
<?php
/**
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since Twenty Fifteen 1.0
*
* @package Acme_Project
* @subpackage Twenty_Fifteen
*/
?>
<?php get_header(); ?>
<?php get_footer(); ?>
Raw
10-adding-an-infowindow-for-alpharetta.js
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker, infowindow, i;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map
});
// Add an InfoWindow for Atlanta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.open( map, marker );
}
})( marker ));
// Place a marker in Alpharetta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 34.075376, -84.294090 ),
map: map
});
// Add an InfoWindow for Alpharetta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.open( map, marker );
}
})( marker ));
}
Raw
11-infowindow-content-for-atlanta.js
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker, infowindow, i;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map,
content: "Atlanta, Georgia"
});
// Add an InfoWindow for Atlanta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.setContent( marker.content );
infowindow.open( map, marker );
}
})( marker ));
}
Raw
12-infowindow-content-for-alpharetta.js
function gmaps_results_initialize() {
var map, marker, infowindow, i;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map,
content: "Atlanta, Georgia"
});
// Add an InfoWindow for Atlanta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.setContent( marker.content );
infowindow.open( map, marker );
}
})( marker ));
// Place a marker in Alpharetta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 34.075376, -84.294090 ),
map: map,
content: "Alpharetta, Georgia"
});
// Add an InfoWindow for Alpharetta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.setContent( marker.content );
infowindow.open( map, marker );
}
})( marker ));
}
Raw
13-twentyfifteen-child-theme-styles.css
/*
Theme Name: Twentyfifteen Maps
Theme URI: https://tommcfarlin.com/google-maps-api-and-wordpress/
Description: A child theme based on Twentyfifteen that demonstrates how to use the Google Maps API.
Author: Tom McFarlin
Author URI: https://tommcfarlin.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
Raw
14-twentyfifteen-styles.php
<?php
add_action( 'wp_enqueue_scripts', 'add_twentyfifteen_maps_styles' );
/**
* Adds the stylesheets to the theme including the parent theme's styles
* as well as the child theme's styles.
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
*/
function add_twentyfifteen_maps_styles() {
wp_enqueue_style(
'twentyfifteen-style',
get_template_directory_uri() . '/style.css',
array(),
'1.0.0',
'all'
);
}
Raw
15-google-maps-library.php
<?php
add_action( 'wp_enqueue_scripts', 'add_twentyfifteen_maps_javascript' );
/**
* Adds the Google Maps library and the custom functionality to the theme.
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
*/
function add_twentyfifteen_maps_javascript() {
wp_enqueue_script(
'twentyfifteen-maps-google-maps',
'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true&key=API_KEY',
array(),
'1.0.0',
true
);
}
Raw
16-public.js
google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );
/**
* Renders a Google Maps centered on Atlanta, Georgia. This is done by using
* the Latitude and Longitude for the city.
*
* Getting the coordinates of a city can easily be done using the tool availabled
* at: http://www.latlong.net
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
* @subpackage Twentyfifteen_Maps/js
*/
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker, infowindow, i;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map,
content: "Atlanta, Georgia"
});
// Add an InfoWindow for Atlanta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.setContent( marker.content );
infowindow.open( map, marker );
}
})( marker ));
// Place a marker in Alpharetta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 34.075376, -84.294090 ),
map: map,
content: "Alpharetta, Georgia"
});
// Add an InfoWindow for Alpharetta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.setContent( marker.content );
infowindow.open( map, marker );
}
})( marker ));
}
Raw
17-enqueue-scripts.php
<?php
add_action( 'wp_enqueue_scripts', 'add_twentyfifteen_maps_javascript' );
/**
* Adds the Google Maps library and the custom functionality to the theme.
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
*/
function add_twentyfifteen_maps_javascript() {
wp_enqueue_script(
'twentyfifteen-maps-google-maps',
'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true&key=API_KEY',
array(),
'1.0.0',
true
);
wp_enqueue_script(
'twentyfifteen-maps-custom-google-maps',
get_template_directory_uri() . '/js/public.js',
array( 'twentyfifteen-maps-google-maps' ),
'1.0.0',
true
);
}
Raw
18-style.css
#map-canvas {
width: 100%;
height: 500px;
}
Raw
19-twentyfifteen-maps-styles.php
<?php
add_action( 'wp_enqueue_scripts', 'add_twentyfifteen_maps_styles' );
/**
* Adds the stylesheets to the theme including the parent theme's styles
* as well as the child theme's styles.
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
*/
function add_twentyfifteen_maps_styles() {
wp_enqueue_style(
'twentyfifteen-style',
get_template_directory_uri() . '/style.css',
array(),
'1.0.0',
'all'
);
wp_enqueue_style(
'twentyfifteen-maps-style',
get_stylesheet_directory_uri() . '/css/style.css',
array(),
'1.0.0',
'all'
);
}
Raw
2-template-maps-with-library.php
<?php
/**
* Template Name: Google Maps API
*
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since Twenty Fifteen 1.0
*
* @package Acme_Project
* @subpackage Twenty_Fifteen
*/
?>
<?php get_header(); ?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true"></script>
<?php get_footer(); ?>
Raw
20-template-maps.php
<?php
/**
* Template Name: Google Maps API
*
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since 1.0.0
*
* @package Twentyfifteen_Maps
*/
?>
<?php get_header(); ?>
<div id="map-canvas"></div><!-- #map-canvas -->
<?php get_footer(); ?>
Raw
3-template-maps-with-canvas.php
<?php
/**
* Template Name: Google Maps API
*
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since Twenty Fifteen 1.0
*
* @package Acme_Project
* @subpackage Twenty_Fifteen
*/
?>
<?php get_header(); ?>
<div id="map-canvas"></div><!-- #map-canvas -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true"></script>
<?php get_footer(); ?>
Raw
4-template-maps-with-map-part-1.php
<?php
/**
* Template Name: Google Maps API
*
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since Twenty Fifteen 1.0
*
* @package Acme_Project
* @subpackage Twenty_Fifteen
*/
?>
<?php get_header(); ?>
<div id="map-canvas"></div><!-- #map-canvas -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true"></script>
<script type="text/javascript">
google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );
/**
* Renders a Google Maps centered on Atlanta, Georgia. This is done by using
* the latitude and longitude for the city.
*
* Getting the coordinates of a city can easily be done using the tool available
* at: http://www.latlong.net
*
* @since 1.0.0
*/
function gmaps_results_initialize() {
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
}
</script>
<?php get_footer(); ?>
Raw
5-template-maps-with-map-part-2.php
<?php
/**
* Template Name: Google Maps API
*
* This template is used to demonstrate how to use Google Maps
* in conjunction with a WordPress theme.
*
* @since Twenty Fifteen 1.0
*
* @package Acme_Project
* @subpackage Twenty_Fifteen
*/
?>
<?php get_header(); ?>
<style type="text/css">
#map-canvas {
width: 100%;
height: 500px;
}
</style>
<div id="map-canvas"></div><!-- #map-canvas -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true"></script>
<script type="text/javascript">
google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );
/**
* Renders a Google Maps centered on Atlanta, Georgia. This is done by using
* the Latitude and Longitude for the city.
*
* Getting the coordinates of a city can easily be done using the tool availabled
* at: http://www.latlong.net
*
* @since 1.0.0
*/
function gmaps_results_initialize() {
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
}
</script>
<?php get_footer(); ?>
Raw
6-adding-a-marker.js
google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );
/**
* Renders a Google Maps centered on Atlanta, Georgia. This is done by using
* the Latitude and Longitude for the city.
*
* Getting the coordinates of a city can easily be done using the tool availabled
* at: http://www.latlong.net
*
* @since 1.0.0
*/
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map
});
}
Raw
7-adding-markers.js
google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );
/**
* Renders a Google Maps centered on Atlanta, Georgia. This is done by using
* the Latitude and Longitude for the city.
*
* Getting the coordinates of a city can easily be done using the tool availabled
* at: http://www.latlong.net
*
* @since 1.0.0
*/
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map
});
// Place a marker in Alpharetta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 34.075376, -84.294090 ),
map: map
});
}
Raw
8-adding-an-infowindow.js
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.open( map, marker );
}
})( marker ));
Raw
9-adding-an-infowindow-for-atlanta.js
function gmaps_results_initialize() {
if ( null === document.getElementById( 'map-canvas' ) ) {
return;
}
var map, marker, infowindow, i;
map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 7,
center: new google.maps.LatLng( 33.748995, -84.387982 ),
});
// Place a marker in Atlanta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 33.748995, -84.387982 ),
map: map
});
// Add an InfoWindow for Atlanta
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.open( map, marker );
}
})( marker ));
// Place a marker in Alpharetta
marker = new google.maps.Marker({
position: new google.maps.LatLng( 34.075376, -84.294090 ),
map: map
});
}
@whartonweb

This comment has been minimized.

Sign in to view
Copy link

commented Jun 25, 2017

Just an fyi... my version of WP 4.8 needed a template name.
/**

  • Template Name: Google API

*/
@architchandra

This comment has been minimized.

Sign in to view
Copy link

commented Feb 9, 2018

While defining a new map in gist 4-template-maps-with-map-part-1.php and the one after that, you have left a comma after the last key-value pair in the LatLng object. Is that okay?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.