Where to add google map api scripts? - Support | Kriesi.at

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

Author

Posts
April 18, 2014 at 5:07 pm #253242
Flikk
Participant
Hi,

I want to add a Google Map on one page by using the API.
What would be the best way to include it?

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);
```
I would also like to use additional elements to control the map
```
var myDiv = document.getElementById( 'location1' );
  google.maps.event.addDomListener( myDiv, 'click', function() {
      infowindow.open(map,marker1);
  });
```
But the only thing i can give an ID are color sections.
So i guess the best i can do is to use text areas and use HTML like that:
draw map:
(text block inside color section for full width map in boxed layout)
```
<div id="map-canvas" style="width: 1130px; height: 400px;"></div>
```
Add text block below for some controls:
```
<div id="location1" class="location">click here to see location 1 on the map </div>
```
So how do i include the scripts to do that?
April 18, 2014 at 10:54 pm #253325

Yigit
Keymaster

Hi Flikk!

You can update Enfold to the latest version which includes a Google Maps element under Media Elements in Avia Layout builder – http://kriesi.at/documentation/enfold/updating-your-theme-files/

Cheers!
Yigit

April 19, 2014 at 12:27 am #253338
Flikk
Participant
Hi,

I allready have the newsest version of Enfold and know about the Google Maps element.
But it is not enough for what i want to use. The Google Maps elements has very limited options and custimization.

So what would be the best way to implement my own javascript for a single page?

Is “template-builder.php” the standard template?
Would it work to create a copy of “template-builder.php”, make a custom template out of it and add:
```
wp_enqueue_script( 'mapAPI', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false');
wp_enqueue_script( 'map', get_template_directory_uri() . '/js/map.js');
```
Or are there better solutions?
April 19, 2014 at 2:00 am #253370
Yigit
Keymaster
Hey!

After enqueueing your scripts, you can try using this plugin – https://wordpress.org/plugins/html-javascript-adder/
You can add a widget area element to your page inside a color section, give color section an unique ID and add following code to Quick CSS
```
#your-custom-id .container { width: 100%; }
```
Cheers!
Yigit
April 19, 2014 at 2:50 am #253398

Flikk
Participant

Hey,

i know you’re reading alot of questions that you have to answer.
But i dont see the point of the plugin if i allready enqueued the scripts in a custom template.
With that, all i need to do is to add a div with the right ID to hold the map.

Maybe you got confused after i answered part of my own question.

To recap my situation:
– i asked for the best way to include my java script code for a single page
– i figured out myself that i can put it into the enfold/js/ folder and enqueue through a custom template
– still wondering if thats the right way to do it or if something like a custom shortcode would be better.

April 19, 2014 at 3:11 pm #253474

Ismael
Moderator

Hey!

Thank you for using the theme!

Looks like you’re managing it yourself well enough. Unfortunately, this is beyond the scope of support and is not a theme related issue. You might need to find a plugin or hire a freelance developer to add the feature for you. Please visit Werkpress for further customization. You can also vote or post the feature on our Feature Requests page.

If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries. Thank you for your understanding.

Regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.