I'd like to use jQuery with Google maps. I'm trying to replicate this example. Below is given the code that I'm using. The problem is that the map does not appear on my web-page. It's just blank. What's the case?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.map.js"></script>
<div id="fragment-4">
<script>
$(document).ready(function(){
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
var clone = $(item).clone().addClass('ui-dialog-vevent');
clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
var lat = result.location[0].geo[0].latitude['value-title'];
var lng = result.location[0].geo[0].longitude['value-title'];
$('#map_canvas').gmap('addMarker', {
'bounds':true,
'position': new google.maps.LatLng(lat, lng),
'title': result.summary,
},
function(map, marker) {
$(item).find('.summary').click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
map.panTo( $(this).get(0).getPosition());
$(clone).dialog({
'modal': true,
'width': 530,
'title': result.summary,
'resizable': false,
'draggable': false
});
$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), {
'position': $(this).get(0).getPosition()
});
});
});
});
});
</script>
<div id="map_canvas">
</div>
</div>
Use pure JavaScript for this.
JQUERY is not the best choice in this case.
I have developed a huge API to overlay vector blueprints over Google Maps and I can tell you that even though it might be a bit more to type it is way better to just use JavaScript.
Do not over complicate things and as M1ke said always keep your console open when working with JavaScript.
Assuming that's your entire code it could be a number of things:
Have you got that script file on line 3 in the correct folder (check your console)
You're targeting #map_canvas but that element doesn't exist.
Having copied the script you need to pass options to the gmap() method or it throws an error.
Best thing would be to check your JavaScript console (Ctrl + Shift + J in Chrome, download Firebug if you're using Firefox) to see the error trace and fix from there.
Also including your script inside a div isn't necessary - the only use for giving the script awareness of a calling element would be if you were using document write, and as you're using jQuery I doubt this will become the case.
Related
I keep running into this issue and I'm sure there is a way around it.
Currently I am building a website that has many blogs. The blogs have an RSS feed that I can use with a neat little jquery script I found to pull back data from the blog such as the blog title, date of blog, blog image, etc.
The script I'm using uses shortcode to render these attributes for example:
<script type="text/javascript" src="http://cdn2.hubspot.net/hub/213747/file-722482310-js/scripts/jquery.rss.js"></script>
<script type="text/javascript">
jQuery(function($) {
$("#tech_feed").rss("http://www.example.com/big-data/rss.xml", {
limit: 1,
entryTemplate: '<h1 id="blog_title">{blog-title}</h1>'
});
</script>
This works great and brings in the title. However I would like to use Jquery to do a substring or slice on this title, but since it is dynamically added I can't seem to grab it. I can do it in the console, but what do I need to do so that I can 'grab it' after it has been loaded as html? Is this possible?
Looks like the plugin you're using has a callback param. So, you can do:
$(function() {
$("#tech_feed").rss("http://www.example.com/big-data/rss.xml", {
limit: 1,
entryTemplate: '<h1 id="blog_title">{blog-title}</h1>'
}, function() {
//Do your thing here where the feed has been loaded;
//Such as
alert ( $("#blog_title").text() );
});
});
EDIT:
After reading your comment, what you want is to operate in the callback after the data arrives:
$("#tech_feed").rss("http://www.feedforall.com/sample.xml", {
limit: 1,
entryTemplate: '<h1 id="blog_title">{title}</h1>'}, function() { });
as seen here:
http://jsfiddle.net/heavyhorse/rz59L0r2/
if you want to modify the inner html of the element try something like this after the data has arrived:
$('#blog-title').text(newTitleData);
http://jsfiddle.net/heavyhorse/y78phrv5/
I've got a bootstrap website that is using google maps to display a location as the header image.
You can see the webpage here: http://www.tarmastersasphalt.com/contact.asp
The html code in the page is this:
<div id="map" class="map img-responsive">
</div>
.
The page pulls in these standard bootstrap functions in the footer:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmap/gmap.js"></script>
.
and the page also calls in this function:
var ContactPage = function () {
return {
//Basic Map
initMap: function () {
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494
});
var marker = map.addMarker({
lat: 38.9721102,
lng: -94.1037494,
title: 'Tar Masters.'
});
});
},
//Panorama Map
initPanorama: function () {
var panorama;
$(document).ready(function(){
panorama = GMaps.createPanorama({
el: '#panorama',
lat : 38.9721102,
lng : -94.1037494
});
});
}
};
}();
.
And then performs this function:
<script type="text/javascript">
jQuery(document).ready(function() {
ContactPage.initMap();
});
</script>
.
This all works fine. What I want to do is to have the google map actually appear more zoomed out when first displayed on the page. I think you can use something like this &z=nn or ,nnz in the link to accomplish this.
.
For example - if you use a browser and go directly to this URL:
https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/#38.9555594,-94.1035777,17z/data=!3m1!4b1!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a
you will see the map as it is displayed on my website. But if you go here:
https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/#38.9734448,-94.1113454,13z/data=!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a
you will see the map as I want it to appear on my website. Notice the use of ,17z in the first link, and ,13z in the second link. (BTW: I also noticed that it seemed to change the coordinate numbers.. not sure what that is all about.)
.
So my question is as follows: Is there any way to tell the gmap function that I want it to be more zoomed out upon first displaying (without having to manually zoom out once it has been displayed)?
I think I have read somewhere that you can add some invisible markers that will force google to zoom out more in order to display all markers in the visable area.. but I am not sure how to accomplish this either.
.
Note: Please view the website on a large screen to see what I am talking about. (I use a static image as the header image when the window size get's small, because the interactiveness of the map doesn't work well with smart phone displays.. you can't scroll past the header image as it takes up the whole viewport, and all you do is move the map around, not scroll down the page.)
.
Any help will be appreciated!
you must define the zoom in the options you pass to GMaps, e.g.:
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494,
zoom: 10
});
(The default-value is 15)
I have a problem with some jQuery scripts. They work separately(when usage of another is commented) but when I want them to work together it stops working completely. I read about .noConflict() method. However, I'm quite new to js and jQ and I'm not sure if it is what I'm looking for. What is more, even it is the problem, I'm probably unable to use noConflict() correctly. I would be really glad if anybody coud help me.
Part of my header:
<script src="jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<!--<script src="jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>-->
The usage of scripts:
<script type="text/javascript">
$(document).ready(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
/* COMMENTED Carousel
var images = jQuery("#images").carouFredSel({
direction : "up",
items: {
visible: 1,
width: 824,
height: 320
},
scroll : {
onBefore: function() {
var act_pos = images.triggerHandler("currentPosition");
jQuery("#scroller-active").animate(
{"top": (act_pos*80)+"px" },
300,
"swing"
);
}
}
});
jQuery(".konstrukcje").mouseover(function() {
jQuery("#images").trigger("slideTo",0);
})
jQuery(".dachy").mouseover(function() {
jQuery("#images").trigger("slideTo",1);
})
jQuery(".budowlane").mouseover(function() {
jQuery("#images").trigger("slideTo",2);
})
jQuery(".projekt").mouseover(function() {
jQuery("#images").trigger("slideTo",3);
})*/
});
</script>
Code above works, but only the lavaLamp part. When I remove the comments it will all crash.
You can see samples here:
http://www.w3schools.com/jquery/jquery_noconflict.asp
There are different ways to use it, I have just used this way of doing it:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
That way means that you then use jq instead of what you used before.
I find this to seperate it more, yet if you are changing someone elses code, it might be time consuming to edit all the code. Then the other ways might be better.
This might or might not affect your problem, as there might be many reasons you have issues. Maybe you have something with preventDefault that triggers? Or maybe something else :-) It's time to get to know mr. console and have a cup of coffee with him.
I'd like to use a jQuery UI button as a custom control in Google Maps API (v3), but I'm having some trouble. All I get on my map is a plain old HTML push button without any jQuery styling. My guess is that when the jQuery UI button() method is called, the 'div' containing my custom control button has not yet been attached to the DOM. Here is a code snippet containing the basic implementation that I'm trying to achieve:
<!-- GOOGLE MAPS API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- CUSTOM JQUERY UI -->
<link type="text/css" href="../jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
$(document).ready(function() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(0, 0),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var controlDiv = document.createElement('div');
var controlButton = document.createElement('button');
controlButton.innerHTML = 'Control Button';
controlDiv.appendChild(controlButton);
// Add 'div' containing button to MVCArray in desired position on map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
$('button').button();
});
</script>
In my Info Windows, I'm building jQuery Tabs after the 'domready' event has been fired. I'm wondering if there's anything similar for building custom map controls. Or is there some other trick to get this to work? Any help or suggestions would be appreciated, thanks!
Update 7/22/11
I tried fooling around with the MVCArray 'insert_at' event by modifying the lines of code from above:
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
$('button').button();
to the following:
google.maps.event.addListener(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM], 'insert_at', function() {
$('button').button();
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].insertAt(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].length, controlDiv);
This method is a bit more clumsy, but it seemed like a way to delay calling the jQuery button() method until after the the button element has been inserted into the map and attached to the DOM. Unfortunately, no luck. Still doesn't work. Probably some straightforward solution I'm missing!
Documentation for the insertAt() method and 'insert_at' event of the MVCArray class can be found here: http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCArray
I need to know that fancybox has been open up that to allow or deny another function to start.
Build-in functions Fancybox like 'onStart' or 'onClosed' not work.
I'm talking about version 1.3.0 RC2
$.fancybox.isOpen (bool) indicates, whether fancybox is open.
The version your using apparently doesn't match the documentation; I looked at the source and saw the names of the options were different the the online docs. I just tested the following with 1.3RC2:
$(document).ready(function() {
function myStartFunction() { alert('fancy box opened'); }
$("a#inline").fancybox({
'onStart': myStartFunction
});
});
The option you're looking for is 'onStart' - the alert in myStartFunction goes off every time I open a box. I'm not sure when they changed the option but you can look at the source of any version you use at the bottom, and see what the option should be called.
EDIT
I just double checked on v1.2.5 - the version I use - and the callbacks are indeed named different. callbackOnStart works with 1.25 but, as I said, not 1.3
Try to use methods
beforeLoad, // Before loading
afterLoad, // After loading
beforeShow, // Before changing in current item
afterShow, // After opening
This code work fine
$(".fancybox").fancybox({beforeShow:function(){alert('blah');}});
If you're looking for a way to determine whether fancybox is open or not (instead of an event that is fired upon opening fancybox) then as of fancybox v2 you can use the $.fancybox.isOpen property. It's not documented (at least I didn't find any reference) but it works.
Example:
if(!$.fancybox.isOpen) {
$.fancybox.open({
href: '#newsletter-campaign-popup',
height: 385,
width: 510,
type: 'inline'
});
}
The example above prevents opening a second fancybox if one is already open.
I'm not sure what you mean by built-in functions. Fancybox has callbacks which call user-defined functions (that you must make yourself).
Like:
function myClose()
{
alert('close');
}
function myStart()
{
alert('start');
}
$("a#single_image").fancybox({
'callbackOnClose': myClose,
'callbackOnStart': myStart
// etc, etc..
});
Alternatively you could check the fancy_content div to see if it has anything inside.
(if it has, then fancybox is open).
if ( $('#fancy_content:empty').length > 0 )
{
// Is empty
}
this seems to work for me:
isLoaded : function(){
return $('#fancybox-content').html()!='';
}
If you have multiple div's that you are using for fancybox, following code might be better and more universal solution:
if ($('.fancybox-opened').length == 0) {
//there is no fancybox opened at all
}
Note also that fancybox content might not be always empty, even if fancybox is closed.
Answer for 2018 December.
if ($('.fancybox-content').length == 0) {
//there is no fancybox opened at all
}
Details:
function checkf()
{
if ($('.fancybox-content').length == 0) {
alert('there is no fancybox opened at all.');
}
else
{
alert('there is a fancybox opened.');
}
}
$("#ffbox").click(function()
{
setTimeout(checkf,1000);
});
checkf();
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox data-options='{"iframe" : {"css" : {"width" : "80%", "height" : "80%"}}}' href="https://www.google.com/maps/search/?api=1&query=China" class="btn btn-primary" id="ffbox">Display Google Map</a>
</body>