Title: Google Maps JavaScript v3 on WordPress page
Last modified: August 21, 2016

---

# Google Maps JavaScript v3 on WordPress page

 *  Resolved [Marteens](https://wordpress.org/support/users/marteens/)
 * (@marteens)
 * [12 years ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/)
 * Hi!
 * I am trying to get [this map](https://developers.google.com/maps/documentation/javascript/examples/directions-draggable)
   into a page on my WordPress site. As you can see they give you a code in JavaScript
   or in JavaScript+HTML.
 * Now, I am not very pro with coding, so I’m not quite sure how to get this code
   to become a map on my site. I have tried to search for an answer, but what I 
   have found have just made me more confused. Any advice to how I could do this?
 * Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [justin_flowpress](https://wordpress.org/support/users/justin_flowpress/)
 * (@justin_flowpress)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970816)
 * Hi there,
 * There are a few different ways of doing this.
 * The best advice I can give you is to start with just getting a very basic map
   to display on your page to simplify things. Once you have that working, update
   the google maps code with this more advanced map.
 * So, to make the map display, you need to do a few things:
 * **– Enqueue the Google Maps JS, for example:**
 * `<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></
   script>`
 * **– Have the necessary css for your map container, for example:**
 *     ```
       <style>
       	html, body, #map-canvas {
       		height: 100%;
       		width: 100%;
       		margin: 0px;
       		padding: 0px
       	}
       </style>
       ```
   
 * **– Your map canvas in your template, for example:**
 * `<div id="map-canvas"></div>`
 * **– Load the map (javascript in your wordpress template), for example**
 *     ```
       <script>
       var map;
       function initialize() {
         var mapOptions = {
           zoom: 8,
           center: new google.maps.LatLng(-34.397, 150.644)
         };
         map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);
       }
   
       google.maps.event.addDomListener(window, 'load', initialize);
       </script>
       ```
   
 * Anyway, this is the basic gist of getting custom maps to display in a wordpress
   template. It’s got a few different parts, so it takes some programming ability.
 * Depending on what you need, you could look into what kinds of plugins are available
   that use draggable directions.
 *  Thread Starter [Marteens](https://wordpress.org/support/users/marteens/)
 * (@marteens)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970818)
 * Hi! Thank you for your answer, and thanks for the very clear explanation of every
   step!
 * I tried what you said, and I inserted this code
 *     ```
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   
       <style>
       	html, body, #map-canvas {
       		height: 500px;
       		width: 100%;
       		margin: 0px;
       		padding: 0px
       	}
       </style>
   
       <div id="map-canvas"></div>
   
       <script>
       var map;
       function initialize() {
         var mapOptions = {
           zoom: 8,
           center: new google.maps.LatLng(-34.397, 150.644)
         };
         map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);
       }
   
       google.maps.event.addDomListener(window, 'load', initialize);
       </script>
       ```
   
 * into [this page](http://tornaia.com/testpage/testpage4/). As you can see, the
   map seems to be working as it should, but I still have the same issues as I had
   with the other map.
 * I have been searching for a plugin that can do this for me, and I have tried 
   so many of them. But so far I haven’t found a plugin that can give me a map with
   directions from A to B like the one I want ([like this](http://tornaia.com/testpage/testpage2/)–
   just without bugs :p ). I am now trying a pluging that might work though, called
   [WP Flexible Map](http://wordpress.org/plugins/wp-flexible-map/), so I’ll let
   you know how that goes. Anyway, thanks again for the answer.
 *  [justin_flowpress](https://wordpress.org/support/users/justin_flowpress/)
 * (@justin_flowpress)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970819)
 * At this point, you could replace the js block above with the js that loads a 
   map with directions. You’d also need to add the directions panel to your html.
 * This should load the type of map you’re looking for.
 *  Thread Starter [Marteens](https://wordpress.org/support/users/marteens/)
 * (@marteens)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970820)
 * I am very sorry, I thought this was [another post](http://wordpress.org/support/topic/symbols-not-showing-and-street-veiw-not-working-google-maps?replies=2).
   As you can see in that post I have found one way to get the map into a page, 
   but it’s with some bugs.
 * The bugs are that the zoom control and the little yellow man (street view) on
   the left side of the map is behaving wierd and not showing properly. And the 
   same for the “x” to get out of street view. Besides, the street view isn’t working
   at all in Firefox for some reason. It works in Chrome, Safari and IE, but not
   in Firefox.
 * The problems I had with the [first map](http://tornaia.com/testpage/testpage2/)
   also comes with the new and [simpler map](http://tornaia.com/testpage/testpage4/)
   that you suggested. So I’m not sure what’s causing it.
 * Again, sorry about the confusion.
 *  Thread Starter [Marteens](https://wordpress.org/support/users/marteens/)
 * (@marteens)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970821)
 * Anyway, the WP [Flexible Map plugin](http://wordpress.org/plugins/wp-flexible-map/)
   seems to be working great. Check out [this map](http://tornaia.com/testpage/testpage5/)
   that I made with the plugin. 🙂
 *  [justin_flowpress](https://wordpress.org/support/users/justin_flowpress/)
 * (@justin_flowpress)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970822)
 * That’s great. Looks like you’ve got things working now. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Google Maps JavaScript v3 on WordPress page’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [justin_flowpress](https://wordpress.org/support/users/justin_flowpress/)
 * Last activity: [11 years, 12 months ago](https://wordpress.org/support/topic/google-maps-javascript-v3-on-wordpress-page/#post-4970822)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics