Title: Where to integrate my Google Maps JavaScript API v3 code in Theme?
Last modified: August 22, 2016

---

# Where to integrate my Google Maps JavaScript API v3 code in Theme?

 *  [XavierClap](https://wordpress.org/support/users/xavierclap/)
 * (@xavierclap)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/where-to-integrate-my-google-maps-javascript-api-v3-code-in-theme/)
 * Hi WP support forum,
 * I have my Google Maps JavaScript API v3 code which I embedded in my header.php
   template. It is working fine, the map is displayed on my web site but I would
   like to place it under the ”site-header” of my home page.
 * Here’s is the URL: [http://zoom.baliradar.com/](http://zoom.baliradar.com/)
 * I tried many times to find answer in the Google Maps JavaScript API V3 Reference
   and in this wordpress forum (and in google) but I found nothing helpful.
 * Here’s my header’s template (the Google Maps JavaScript API v3 starts with the
   comment: <!–From here this is the google maps API–> and ends with the comment:
   <!–The Google Maps API end here–>
 * Thank you for your time
 *     ```
       <?php
       /**
        * The Header template for our theme
        *
        * Displays all of the <head> section and everything up till <div id="main">
        *
        * @package WordPress
        * @subpackage Twenty_Thirteen
        * @since Twenty Thirteen 1.0
        */
       ?><!DOCTYPE html>
       <!--[if IE 7]>
       <html class="ie ie7" <?php language_attributes(); ?>>
       <![endif]-->
       <!--[if IE 8]>
       <html class="ie ie8" <?php language_attributes(); ?>>
       <![endif]-->
       <!--[if !(IE 7) & !(IE 8)]><!-->
       <html <?php language_attributes(); ?>>
       <!--<![endif]-->
       <head>
       	<meta charset="<?php bloginfo( 'charset' ); ?>">
       	<meta name="viewport" content="width=device-width">
       	<title><?php wp_title( '|', true, 'right' ); ?></title>
       	<link rel="profile" href="http://gmpg.org/xfn/11">
       	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
       	<!--[if lt IE 9]>
       	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
       	<![endif]-->
       	<?php wp_head(); ?>
       </head>
   
       	<!--From here this is the google maps API-->
       <!DOCTYPE html>
       <html>
         <head>
           <style type="text/css">
             html, body, #map-canvas { height: 100%; margin: 25px; padding: 25px;}
           </style>
           <script type="text/javascript"
             src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByXKtVnD4m3T239sM9RZdc_1XqxCXUP3I">
           </script>
           <script type="text/javascript">
       	//Map Properties
             function initialize() {
       	//Properties
               var mapOptions = {
                 center: { lat: -8.501653, lng: 115.192427},
                 zoom: 10,
       	  minZoom: 10
       	  //Other examples RoadMap - Satellite - Hybrid - Terrain
               };
       	//Map Object
               var map = new google.maps.Map(document.getElementById('map-canvas'),
                   mapOptions);
             }
             //Loading Map
                   google.maps.event.addDomListener(window, 'load', initialize);
   
           </script>
         </head>
         <body>
       <div id="map-canvas"></div>
         </body>
       </html>
   
       <!--The Google Maps API end here-->
   
       <body <?php body_class(); ?>>
   
       	<div id="page" class="hfeed site">
       		<header id="masthead" class="site-header" role="banner">
       			<a class="home-link" href="<?php echo esc_url(     home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
       				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
       			</a>
   
       			<div id="navbar" class="navbar">
       				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
       					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
       					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
       					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
       					<?php get_search_form(); ?>
       				</nav><!-- #site-navigation -->
       			</div><!-- #navbar -->
   
       		</header><!-- #masthead -->
   
       		<div id="main" class="site-main">
       ```
   

Viewing 1 replies (of 1 total)

 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/where-to-integrate-my-google-maps-javascript-api-v3-code-in-theme/#post-5749843)
 * Hi XavierClap
 * Wouldn’t it be easier to add maps with a plugin?
    [https://wordpress.org/plugins/search.php?q=google+maps](https://wordpress.org/plugins/search.php?q=google+maps)
 * Try it with this:
 *     ```
       <?php
       /**
        * The Header template for our theme
        *
        * Displays all of the <head> section and everything up till <div id="main">
        *
        * @package WordPress
        * @subpackage Twenty_Thirteen
        * @since Twenty Thirteen 1.0
        */
       ?><!DOCTYPE html>
       <!--[if IE 7]>
       <html class="ie ie7" <?php language_attributes(); ?>>
       <![endif]-->
       <!--[if IE 8]>
       <html class="ie ie8" <?php language_attributes(); ?>>
       <![endif]-->
       <!--[if !(IE 7) & !(IE 8)]><!-->
       <html <?php language_attributes(); ?>>
       <!--<![endif]-->
       <head>
       	<meta charset="<?php bloginfo( 'charset' ); ?>">
       	<meta name="viewport" content="width=device-width">
       	<title><?php wp_title( '|', true, 'right' ); ?></title>
       	<link rel="profile" href="http://gmpg.org/xfn/11">
       	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
       	<!--[if lt IE 9]>
       	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
       	<![endif]-->
       	<?php wp_head(); ?>
   
       	<!--From here this is the google maps API-->
   
       	<style type="text/css">
             html, body, #map-canvas { height: 100%; margin: 25px; padding: 25px;}
           </style>
           <script type="text/javascript"
             src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByXKtVnD4m3T239sM9RZdc_1XqxCXUP3I">
           </script>
           <script type="text/javascript">
       	//Map Properties
             function initialize() {
       	//Properties
               var mapOptions = {
                 center: { lat: -8.501653, lng: 115.192427},
                 zoom: 10,
       	  minZoom: 10
       	  //Other examples RoadMap - Satellite - Hybrid - Terrain
               };
       	//Map Object
               var map = new google.maps.Map(document.getElementById('map-canvas'),
                   mapOptions);
             }
             //Loading Map
                   google.maps.event.addDomListener(window, 'load', initialize);
   
           </script>
   
           <!--The Google Maps API end here-->
       </head>
   
       <body <?php body_class(); ?>>
       	<div id="page" class="hfeed site">
       		<header id="masthead" class="site-header" role="banner">
       			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
       				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
       			</a>
   
       			<div id="navbar" class="navbar">
       				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
       					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
       					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
       					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
       					<?php get_search_form(); ?>
       				</nav><!-- #site-navigation -->
       			</div><!-- #navbar -->
       		</header><!-- #masthead -->
   
       		<div id="main" class="site-main">
   
       		<!-- The Google Maps map -->
       		<div id="map-canvas"></div>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Where to integrate my Google Maps JavaScript API v3 code in Theme?’ is
closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/where-to-integrate-my-google-maps-javascript-api-v3-code-in-theme/#post-5749843)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
