I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map.
However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)
I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first
Here is my HTML
<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
<div data-role="content" id="ct">
<div id="map_canvas" style="height:100%"></div>
</div>
....
</div>
And JS
$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {
if (!mapInited) {
mapInited = true;
$('#map_canvas').gmap().bind('init', function () {
var bounds = new google.maps.LatLngBounds();
navigator.geolocation.getCurrentPosition(locSuccess, locError);
$.each(markers, function (i, marker) {
var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlong);
$('#map_canvas').gmap('addMarker', {
'position': latlong,
'bounds': true,
'primaryColor': "#0000FF",
'icon': './img/train.png'
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content
}, this);
});
});
$('#map_canvas').css('height', getRealContentHeight());
$('#map_canvas').css('width', '100%');
google.maps.event.trigger($('#map_canvas'), "resize");
setTimeout(function () {
google.maps.event.trigger($('#map_canvas'), 'resize');
}, 500);
});
}
}
});
}
Thanks in advance for any thoughts
"Fixed" the issue with a very ugly work around
Basically I recreate the Map everytime the page is loaded, like this
if (!mapInited) mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }
You trigger the resize-event for a jQuery-object, what will not have any effect, because you must trigger the event for the google.maps.Map-instance:
google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');
You may also use the plugin-method triggerEvent to trigger the event:
$('#map_canvas').gmap().triggerEvent('resize');
If you are using jquery-ui-map, why are you using the native google maps api instead of the gmap functions?
Why not call the $('#map_canvas').gmap('refresh');
Related
I'd be grateful if some kind person would glance over this PayPal SmartButton code?
I've put in the NO_SHIPPING and I'm not sure about all the brackets (){}[] and whether there should be double " or single ' inverted commas etc.
I'm OK with html, but this scripting mystifies me.
Thanks in anticipation, Steve
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&e nablefunding=venmo¤cy=GBP" data-sdk-integration-source="button- factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"item for sale\nacceptM/accept43_BB1frT6.htm","amount":{"currency_code":"GBP","value":20}}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
//actions.redirect('https://www.website.com/');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
Script SDK line is not correct, has extra spacing and a missing hyphen. You need:
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=GBP" data-sdk-integration-source="button-factory"></script>
That's simply the code the button factory would have generated for you, and it works.
For future reference most HTML/JS problems can be troubleshooted in a browser's Developer Tools, on the Console and Network and (for HTML) Inspect tabs, reloading the page once the Network tab is open for example.
When I put my object (points) in the same script as the google maps API it works fine. But when I move the object to its own script on top it says "points is not defined".
I need to have the object in the top script (its actually coming from a database).
See working demo: https://price-points.web.app/
This is a Svelte project.
<script>
export const prerender = true;
let showMap = false;
//How can I make this work without the setTimeout?
setTimeout(function(){showMap = !showMap}, 1);
</script>
<!-- Google Maps API -->
<div>
<div id="map"></div>
<script>
//If points object is here it works fine.
//If points is defined in top script it says "points is not defined"
//My ACTUAL points object comes from a database and needs to be in top script.
let points = {
sanFrancisco: {
lat: 37.7749,
lng: -122.4194,
price: 123.45
},
losAngeles: {
lat: 34.0522,
lng: -118.2437,
price: 567.89
}
}
function initMap() {
const california = {lat: 36.7783,lng: -119.4179};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: california,
});
Object.values(points).forEach(({ lat, lng, price }) => {
const marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
label: `$${price}`,
icon: { url: 'https://i.imgur.com/ECXgKpB.png', scaledSize: new google.maps.Size(60,35), labelOrigin: new google.maps.Point(30, 15)}
});
});
}
window.initMap = initMap;
</script>
{#if showMap}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" defer async></script>
{/if}
</div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
The script in Svelte components is scoped (it is implicitly a module which requires import/export), you have to set window.points to make variables available globally.
Note that in SvelteKit you cannot access window during server-side rendering, so you probably should move the assignment into onMount. In general you should not have multiple script tags in the first place, maybe you are fighting the wrong problem.
I'm having trouble showing a modal with Ember. I've followed the cookbook but when I click the button for the modal, it only shows the overlay and not the modal itself.
Here's my gist: https://gist.github.com/sunocean-sand/e11111cea44274417012
I appreciate your help!
I've got a similar implementation in one of my apps. Try changing your routes/application.js to the code below. I believe your problem is that you're not using Bootstrap's Programmatic API.
export default Ember.Route.extend({
actions: {
openModal: function(modal) {
this.render(modal, {
into: 'application',
outlet: 'modal'
});
return Ember.run.schedule('afterRender', function() {
Ember.$('.modal').modal('show');
});
},
closeModal: function() {
Ember.$('.modal').modal('hide');
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.
EDIT: Solved:
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
I'm a cut-and-paste coder and while I intend on learning the syntax better, I'm on a deadline for now so I'm asking for help. I have googled extensively and while there are solutions to my problem, I haven't found one that works for me. My KML file is hosted on Google Drive so instead of a file url there is a driveFileId.
If you want to preserveViewport, you normally just add it to the layer object and set it to 'true'. However my KML file won't let me override its default zoom level where the bounds fit the screen no matter how I write it. Can someone help? This is the working object:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
EDIT: Here's the whole thing. Perhaps you can see if there are redundancies or contradictions that are causing this.
<!DOCTYPE html>
<html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Aexamplekey0&sensor=true"></script>
<style>
#map {
width: 310px;
height: 410px;
}
</style>
<script>
window.onload = function () {
var latlng = new google.maps.LatLng(53.385873, -1.471471);
var styles = [
{
//whatever
}
]
var myOptions = {
zoom: 15,
disableDefaultUI: false,
styles: styles
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Based on the current release API documentation, you should be able to set the preserveViewport option in the object you instantiate:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg",
preserveViewport: true});
layer.setMap(map);
Without further information, such as a URL to your KML data, information about your map center and zoom, there's not much further that can be said.
GOT IT!
Here it is:
var opt = { minZoom: 11, maxZoom: 15 };
map.setOptions(opt);
And then in your the myOptions object you set your default zoom. Solution found here: Google Maps v3 - limit viewable area and zoom level
thanks to #ChrisV. I don't know why but the KML Layer won't allow any permutation of the original preserveViewport code.