I am trying to get a google map loaded into a post.
In the header i load:
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
In the post in wordpress i load:
<div id="map_div"></div>
You can see the .js here: http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js
The map does not show at all, so i am hoping you guys can help me with this.
As #Anto Jurković mentioned in the comments you need to include your parking.js at last.
You're initialize the map and other objects when these objects don't exist yet because your jquery and Google Maps are loaded later. Also you don't provide your API key when you load the maps javascript, so Google won't provide you the map.
So it must be:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
How you can get the API key is documented in the official Google Maps v3 Documentation.
TL;DR: You'll get it with the Google Developer Console
None of the above worked. It does not matter when the script is loaded, and the script should also be loaded using the functions.php in wordpress i found out.
The div should have a size property, and this resulted in the map being displayed
Related
I have a WowSlider that is not working when running the main page of my Wordpress website with https. The images in the slider appear stacked statically one after another. When running the Wordpress website with http, the slider works fine (provides the transition effect expected).
I am trying to figure out how to modify my website such as to launch a javascript with https, not http. I want to launch the javascript as
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (*)
but not as
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (**)
But since I have not been able to manually edit the source code behind the main page, I have not been able to get (*) to work.
Hence the question: How to modify the Wordpress site (php scripts?) such as to implement (*)?
I have come to understand that the problem has to do with contention between http and https.
My problem resembles the one from
jQuery slider not working in https URL
I believe the same solution will apply. I should launch the javascript using
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
The hypothesis above is supported by an observation from
https://www.allbookcovers.com (***)
Here a corresponding WowSlider operates fine with https.
When analyzing the code behind (***), I noticed the following:
<!-- Start wowslider.com Head section -->
<link rel="stylesheet" type="text/css" href="js/engine1/style.css" />
<script type="text/javascript" src="js/engine1/jquery.js"></script>
<!-- End WOWSlider.com section -->
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-magento-fix.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
In my website, the javascript is launched with http, not https:
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
I tried to comb through my Wordpress website to figure out where jquery.js was being launched. I found the following in
\\wp-includes\script-loader.php(963):
scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' ); (****)
It was not clear to me how to modify this such as to result in
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
getting added to the main page, since (****) made no direct reference to http.
Any suggestions?
I withdraw the question. I appear to have stumbled on a solution. As I was getting ready to hand-edit the PHP files comprising my website, or even go into the PHP database and manually edit the content, I stumbled on a plugin called "Really Simple SSL". I installed the plugin. And vuha! My problems went away.
I'm still learning Angular and Google Map API, and I'm having a sort of road block. I'm trying to fetch the map language using angular variable, like this way
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
When the page finish loading, I can see that the &language=xx is printed fine on the script source, though the map is still in English :(
I think google map loads, just before the language parameter get's printed. Is there any other way to solve this?
Additional: All of my script files are located at the bottom of my page
<body>
.
..
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<script type="text/javascript" src="localize.js"></script>
<script type="text/javascript" src="route-planner-widget.js"></script>
</body>
I have thought that maybe, I should call the google map script after my angular script (route-planner-widget.js) finish loading first, but it seems, it's not working either.
SO my file hierarchy that is the same on my desktop as it is in my web-host file manager
1- This is my iframe from my code editing program (Adobe Edge Code) correctly working when I throw the page up in Google Chrome]
2- And this is my iframe not working when I have the page hosted in my web-hosts file manager.
1: https://pantherfile.uwm.edu/leyton/Screen%20Shot%202013-12-20%20at%203.51.37%20PM.png?uniq=-n0ztwi
2: http://leytonelizabeth.com/photography.html
I don't know anything about Javascript and definitely nothing about JQuery. All I know is that I have a code that correctly displays my website when I preview it on Google Chrome.
When I put all my files in the exact same hierarchical order in my web-hosting site's file manager, I navigate to it and it doesn't work.
Why does it point to the files and paths correctly when it's coming from my desktop and not when it's coming from Webhostinghub.com?? I transferred them over in exactly the same order. The paths are correct. So it must be something with jQuery. Can anyone give me some advice or things to try in order to get the iframe to display my photos?
Is it perhaps because there are several Core Scripts being referenced at the top of my photography.html page? do I need to update/download each version? Do viewers looking at my site need to go through all that too then just to potentially see the photos in my iframe? As you can see in the pic of the photo that properly works in the iframe, it points to the prettyPhoto jQuery and its respected gallery, not some other url..
I have NO IDEA what to do about this. Please help!!!
These are the scripts at the top of all my html5 documents/pages:
`<!-- Cufon Scripts -->
<script src="js/libs/cufon-yui.js" type="text/javascript"></script>
<script src="js/fonts/mank-sans.cufonfonts.js" type="text/javascript"></script>
<script src="js/fonts/Yanone_Kaffeesatz_Regular_400.font.js" type="text/javascript">
</script>
<script src="js/royale-cufon.js?v=1" type="text/javascript"></script>
<!-- Core Scripts -->
<script src="js/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="js/libs/mdetect.min.js" type="text/javascript"></script>
<script src="js/libs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="js/libs/jquery.easing.1.3.min.js" type="text/javascript">
</script>
<script src="js/royale.js?v=1" type="text/javascript"></script>
<!-- Bg Image Script -->
<script src="js/royale-bg-image.js?v=1" type="text/javascript"></script>
<!-- Added for Lightbox Script -->
<script src="js/libs/jquery.pretty-photo.min.js?v=1" type="text/javascript"></script>
<!-- Setup Script -->
<script type="text/javascript">`
1 Lots of your 'thumb' folders are empty.
2 The "big-sized" picture of teacup (the only thumb picture i can see) is referred as "img/portfolio/theaccident/tea.jpg", but the real file path is "img/portfolio/theaccident/Tea.jpg" (the capital letter matters)
So the problem is not in the scripts, It's in your export settings or your host defaults.
UPD:
3 Some links from your 'thumbless' pictures are pointing to correct 'big-sized' pictures (their first letters are not capitalized).
You definetely did something wrong when moving everything from desktop to host.
I'm using Google Maps v3 and want it to load faster.
My setup:
At the end of a .js file
google.maps.event.addDomListener(window, 'load', initialize);
And at end of the HTML page code:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
How can I make the map appear on screen quicker?
You don't need to include both of these scripts:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
especially if you only using Google Maps. If you are using more than one of these Google APIs (or these JavaScript libraries), include only http://www.google.com/jsapi. Otherwise, if you are only using Google Maps, include only http://maps.google.com/maps/api/js?sensor=false. This along will save one request.
You can't really make the maps load quicker, but one of the tricks you can do is load a static map first using Google Map's Static Maps API so it will appear to load faster.
Another trick is to load the maps only when the user asks for it. However, without knowing what your site's requirement is, it's hard to tell. With the Google library loader, you can do
google.load("maps", "3", {other_params:'sensor=false', callback: function(){
var map; // initialize your map in here
});
or if you are not using the library loader, you can do this.
you can add an eventlistener to a button and dynamically create and fill a new iframe with the map as a content? This way the map will not be loaded untill the button has been clicked.
var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
if($('#iframe').size == 0) {
$('#iframe').load(map, function() {
$('#button').unbind('click');
});
}
});
Of course you'll have to style the iframe and position it right, this is just an idea.
Hey All, I currently use Google's API to include jQuery into my sites like this:
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3.2");</script>
How would I accomplish the same for the jQuery UI javascript and css files?
For the jQuery UI:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
This is the latest version.
For consistency with the way you're doing it you want:
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
http://code.google.com/apis/ajaxlibs/documentation/index.html#jqueryUI
Since you're using the Google API, you can include jQuery UI with the following code:
google.load("jqueryui", "1.5.3");
Check the documentation here.
You will need to host the CSS Themes on your server.
Hosting your own CSS files allows you to create fully customized themes, give a look to the Theme Roller.