Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin

tommcfarlin/1-template-maps.php Secret

Last active February 20, 2022 22:22
Star
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
Copy link

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

  • Template Name: Google API

*/

@architchandra
Copy link

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