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

  • XavierClap

    (@xavierclap)


    11 years, 4 months ago

    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/

    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

    (@keesiemeijer)

    11 years, 4 months ago

    Hi XavierClap

    Wouldn’t it be easier to add maps with a plugin?
    https://ww.wp.xz.cn/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.