Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[WordPress] Using the Google Maps JavaScript API within the context of WordPress
<?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(); ?>
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 ));
}
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 ));
}
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 ));
}
/*
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
*/
<?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'
);
}
<?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
);
}
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 ));
}
<?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
);
}
#map-canvas {
width: 100%;
height: 500px;
}
<?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'
);
}
<?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(); ?>
<?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(); ?>
<?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(); ?>
<?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(); ?>
<?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(); ?>
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
});
}
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
});
}
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener( marker, 'click', ( function( marker ) {
return function() {
infowindow.open( map, marker );
}
})( marker ));
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.

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.

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.