[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 | |
}); | |
} |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
Just an fyi... my version of WP 4.8 needed a template name.
/**
*/