I am using Place Autocomplete and it is working fine in firefox but it is not working in google chrome with translation. Our website is in arabic.
<script src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
}
Some time working and some time not working in chrome with translation
Related
I'm designing an interface with PHPrunner that runs on XAMPP.
In a page of the interface I need to use the Google Maps Autocomplete function on a textbox.
To get the JavaScript piece of code I used this guide. I managed easily to link the function to the Control of the textbox but as soon that the pages load the whole textbox crashes with Google giving an anonymous error (something like "We're sorry, an error occurred").
In particular I put
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
in the <head> tag of the page and the code
function init() {
var input = document.getElementById('myfield');
var autocomplete = new google.maps.places.Autocomplete(input);
}
in the Javascript OnLoad Event (in PHPrunner).
Your Script:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
Generate new key for web and paste your key in below script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&libraries=places
async defer></script>
I have some script that works on my dev server but not on my staging server:
add_action('wp_head','get_gz_info',30);
function get_gz_info(){
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
var modal = {action:'modal_action'};
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
$.post(ajaxurl,modal,function(data){
$('body').append(data);
});
});
</script>
<?php
}
the php is roughly:
add_action('wp_ajax_modal_action', 'set_modal');
add_action('wp_ajax_nopriv_modal_action', 'set_modal');
function set_modal() {
...
}
Everything works fine on my dev side but the staging side the javascript is placed in the header (just like the dev) but it won't run the "ajax part". Could it be that the staging side requires a username/password to access it?
I've attempted it with and without the https and get the same results.
According to the inspect this is being set as the ajaxurl, "...mysite.../wp-admin/admin-ajax.php" so the ajaxurl is being implemented. The odd issue is it works as is on one server but not the next.
----- EDIT -----
The html shows this as the js in the head (after jquery loads)
<script type="text/javascript" >
jQuery(document).ready(function($) {
var modal = {action:'modal_action'};
var ajaxurl = '...mysite.../wp-admin/admin-ajax.php';
$.post(ajaxurl,modal,function(data){
$('body').append(data);
});
});
</script>
The person who setup the staging server placed and .htaccess in the admin side that prevented the site from accessing files in the wp-admin area.
I am using AJAX and in the page I have used this script.
It's working on local server. But it's not working on the live server.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var fb = document.createElement('fb:like');
fb.setAttribute("href","<?php echo 'http://bagstudio.co.uk/menu_details.php?pid='.$product_id; ?>")
fb.setAttribute("layout","button_count");
fb.setAttribute("show_faces","false");
fb.setAttribute("width","100");
fb.setAttribute("font","arial");
document.getElementById("FaceBookLikeButton").appendChild(fb);
//]]>
</script>
Have you checked your error console. You could have an error somewhere else on the page. That could cause the whole thing to crash. I suggest that because your code worked perfectly fine for me. Also verify that there is in fact an element with the id FaceBookLikeButton
I need to implement on my php page map. I have container <div id="map"></div> which is inside other div, and I put this code inside <head> tag but it doesn't show at all. Can anybody help me?
<script type="text/javascript" src="javascript/jquery-1.4.3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function() {
window.onload = function() {
var mapDiv = document.getElementById('map');
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = {
center: latlng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, options);
}
})();
</script>
Did you specify size for your div? eg:
<div id="map" style="width: 300px; height: 300px;"></div>
If this doesn't work you might have to post a snippet of your HTML and CSS..
I had some thing like that happen and all I had to do was use jquery compliance code.
jQuery(document).ready(function($) {
$(function() {
// Your map code here.
});
});
Your code does work for me even though the last line, when you close that anonymous function, gave me an error like you were using some illegal character, so I had to retype it. Once I did, it worked perfectly showing a road map of all of the United States.
Other than that possible illegal character you could also try:
giving your #map element a height and width or else it won't be visible.
putting all your javascript inside $(document).ready() so it's only execute when the document is ready.
you say that you include your scripts in the head tag of your document, but maybe you should try putting them at the end of your body to speed up loading.
Hope that helps.
Check the validity of your HTML and the doctype declaration. It has been an issue on several Google Maps I've setup.
See this
If any one using google map code from javascript or jquery or any language,
He/She should use for local host https://localhost/test/ or in server https://example.com.
Means use secure url like https
I have multiple jquery files in my project. I am using facebox using jquery1.4.2 but i need prototype and scriptacolous scripts too. I have used jQuery.noconflict(); in my code but its not working.
this is the url http://mlep.com/~avalon/wordpress/ideas-and-insights/case-studies/.
it should be in this manner of arrangement,
load other libraries and other non-jQuery scripts
load jQuery library.
call jQuery.noConflict.
load jQuery plugins
other jQuery stuff or codes..
codes like this,
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/jquery14.js"></script>
<script type="text/javascript">
var ang = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/facebox.js"></script>
<script type="text/javascript">
// other jQuery Codes here...
</script>