[AndyParticipant]

Thanks.

Just saw your reply to Peter. It’s a link to external Javascript. Would this be correct, to add to functions.php?

add_action(‘wp_head’,’my_addition_js’);
function my_addition_js() {
echo ‘<script src=”https://maps.googleapis.com/maps/api/js” type=”text/javascript”/>’;
}

Does that look right? I’ll go try it myself but I don’t want my solution to be a hack / if it works I want it to be sustainable. Would pasting “https://maps.googleapis.com/maps/api/js” into customizer custom JS do the same thing? Not sure where customizer is putting that code. Thanks again.

[ThaiModerator]

Hi Andy,

Add the following code to functions.php file will work fine:

add_action('wp_head','my_addition_js');
function my_addition_js() {
	echo '<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"/>';
}

Would pasting “https://maps.googleapis.com/maps/api/js” into customizer custom JS do the same thing?

No, it will not work. The code under Customizer > Custom > JS should be similar to this:

jQuery( function($) {
	$(document).on('click', '.x-btn-widgetbar', function( e ){
		$('.x-widgetbar').toggleClass('noscroll');
	});
});

Hope it helps 🙂

[AndyParticipant]

Hi, thanks,

add_action('wp_head','my_addition_js');
function my_addition_js() {
	echo '<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"/>';
}

didn’t work (made page body white)

but

function add_wp_scripts() {
    wp_enqueue_script(
        'google-maps',
        'https://maps.googleapis.com/maps/api/js',
        array(),
        null,
        null
    );
}
add_action( 'wp_enqueue_scripts', 'add_wp_scripts' );

is working at http://roadtripsharing.com/sample-page in that you can submit and get the distances for each route leg. So the Google Maps library is being added.

But the map is not showing. I tried setting z-index of #map to z-index:99999999; but that doesn’t make the map display. Could there be a conflicting #map id in use by X? Just did a fresh install with minimal plugins to try to troubleshoot the JS… any idea what’s going on?

Here’s a working Fiddle of what it’s supposed to look like:

http://jsfiddle.net/geocodezip/50g6vgns/1/

I pasted the exact code into a raw content cornerstone element, custom CSS, and custom JS for the page, respectively, and the enqueue add_action into functions.php as mentioned above.

I’ll put login creds in the next reply in case you could go in and see what’s up.

Thanks kindly. Loving the new look of the custom CSS and JS inputs and that CS validates the HTML in the raw content elements.

Andy

[AndyParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Andy,

I’ve checked the page where you have added your custom map. The map is working, but its height is 0px. To fix this, you’ll need to give the map div a fixed height. To do that, replace your following custom CSS code:

#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
  z-index: 99999999;
}

With this:

#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 500px;
  z-index: 99999999;
}

That is, give the map a fixed height, i.e., 500px.

Hope this helps. 🙂

Thank you!

[AndyParticipant]

Yes!

#map {
height: 500px;
float: left;
width: 70%;
}

worked.

Thanks very very much Zeshan.

[JadeModerator]

You’re most welcome Andy.

[jaronhumistonParticipant]

Ive read through all of the comments relating to the thread. What If we are using one of the expanded demos. Where will we find those frameworks?

[ChristopherModerator]

Hi there,

It doesn’t matter which demo content you’re using, it’s the same for all stacks and demo content. You need to connect to FTP and add script in child theme’s functions.php file.

Hope it helps.

[Author]

Posts