I am trying to integrate cordova google map in Framework7 html but its not display any map there although I have write similar code for normal html page and its working there. Any help will be highly appreciated.
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
//navigator.geolocation.getCurrentPosition(onSuccess, onError);
var mapDiv = document.getElementById('map_canvas');
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
var map = plugin.google.maps.Map.getMap(mapDiv);
map.addEventListener(plugin.google.maps.event.MAP_READY, function () {
map.setCenter(GOOGLE);
});
}
</script>
You might need to use google.maps.event.addDomListener(window, 'load', initialize);, try to use domlistener within deviceready to load google library asynchronously.
*function loadAsynchronousScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +'&signed_in=true&callback=initialize';
document.body.appendChild(script);
}*
Try to play around with demo app, this demo app uses Google Maps SDK for cordova: https://github.com/mapsplugin/cordova-plugin-googlemaps
Related
i am using angularjs in a web development project and using Angular Google Maps
api was recommended to me for adding google map to my project.
it was very useful api but when i load it in my project using this quick start it crash some time and throw this exception to me:
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script unless
it is explicitly opened.
and some time it work nice. i searched in google and now i know this problem is because of loading google map after loading page. anyone can help me to find a solution to load map to partial html form after loading asynchronously?
Specify &callback=someWindowFunction in your api request and document.write won't get called
var _this = this;
window["googleMapsLoad"] = function () {
_this.googleMapsLoaded = true;
if (_this.initialized) {
_this.reportReady();
_this.createMap();
}
};
this.initialize = function (reportReady) {
this._super(false);
if (this.googleMapsLoaded) {
this.reportReady();
this.createMap();
}
};
var script = document.createElement("script");
script.src = "//maps.googleapis.com/maps/api/js?callback=googleMapsLoad";
document.head.appendChild(script);
Following these instructions: https://developers.google.com/+/web/api/javascript
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=signin';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Inserted before the tag...
The gapi object that is available inside the signout() callback does not include gapi.client .. in fact, I am getting gapi.client is undefined as a JS error.
I cannot call gapi.client.load('drive', 'v2', callback) since the client property is undefined.
This issue is only when using Firefox Add-on SDK and using cfx run to open a browser with the add-on I am developing being a sidebar element.
Can anyone tell me what I am doing wrong? Can provide more information if necessary!
I am learning how to create a Firefox add-on. I want to do a simple add-on that will inject a script in a page. I have read the documentation but I can't solve this problem.
in the cfx run logs, I can see that it runs the script various times in the same page when it should do it only once.
main.js
var pageMod = require('sdk/page-mod')
var data = require('sdk/self').data
pageMod.PageMod({
include: ['*'],
contentScriptWhen: 'end',
contentScriptFile: data.url('starter.js')
})
starter.js
var script = document.createElement('script');
script.id = 'i-inject';
script.type = 'text/javascript';
script.src = 'http://localhost:8888/injectme.js';
document.getElementsByTagName('head')[0].appendChild(script);
console.log('injected');
Do you see this console.log('injected') ? I can see that it's printed 5 times in the console when I do cfx run and each time I reload the page. I don't understand that behaviour.
Any help greatly appreciated :)
I just finished asking the same question, for some reason multiple searches didn't lead me to this question until now.
The link you posted concerning iFrames lead me to this solution, which seems to be working well.
In Firefox, iFrames are still Pages, and by default the SDK doesn't discriminate between iFrames and top Pages, causing content scripts to attach to ANY loaded page ( or iFrame ) that meets your pageMod 'match' requirements. Rather than use page-mod, you can use tabs to inject the scripts and data you need.
var data = require("sdk/self").data;
var tabs = require('sdk/tabs');
tabs.on('ready', function(tab) {
var worker = tab.attach({
contentScriptOptions: {},
contentScriptFile: [data.url('myScript.js')]
});
// now set up your hooks:
worker.port.on('someKey', function(data) {
//do whatever with your data
});
});
Alternatively, you can modify the behavior of PageMod to only apply to the top page, which will prevent it from running in any iFrames on the page.
var data = require("sdk/self").data;
var pageMod = require('sdk/page-mod');
pageMod.PageMod({
match: [*],
attachTo: ["top"],
contentScriptOptions: {},
contentScriptFile: [data.url('myScript.js')],
onAttach: function(worker) {
//function body
}
});
More details on how to further control page-mod behavior can be found in their API docs
Trying to load the Google maps asynchronously so that the start of the HTML page is faster.
Have used the following code as mentioned in the link: https://developers.google.com/maps/documentation/javascript/tutorial#asynch. Section: Asynchronously Loading the API.
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Issues:
When the network is disconnected after the loadScript() function is invoked. Currently we do not find anyway to check the network connection is terminated & do appropriate error handling.
Even when the network is available some times the callback function 'initialize()' is never called.
Loading of google maps on mobile device is very slow even on a 3G network.
In both the cases mentioned above, we start a loading icon immediately after loadScript() is invoked. As initialize() is not called back it gets blocked in the loading icon for infinite time.
Kindly provide some pointers to handle the network disconnect & callback function not invoked issues.
The Maps API does not have a native way to handle this. Thankfully HTML5 does. Listening to the document.online / document.offline events is very effective and I have used it to solve this problem.
See https://developer.mozilla.org/en/DOM/document#Event_handlers
This is supported in at least iOS 5 and Android 2.3.
You could also use setTimeout to check that the API callback has occurred and handle it appropriately if not.
I have a page that renders a simple google map for a specified location. This map renders without any problems at all when I run it locally on localhost, however, when I deploy this code to our live web servers (using our LIVE google API key for the appropriate domain) it fails to render, and upon putting a series of alerts within the javascript on the page, it appears that the 'Initialize' method (which should be called within body onLoad) is not being called.
When I view the HTML source that is rendered on the live server it appears exactly as per the local version of the site (including the call to initialize() within the body onLoad event), albeit with the different maps API key.
I have output the host (alert(window.location.host);) to ensure that the key I generated via the google maps api site, corresponds exactly to the live server, which it does.
Does anyone have any ideas why it would be working locally but not when deployed to the live servers? The live site is hosted on 2 load-balanced web servers.
This is the javascript that is rendered:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA-BU8POZj19wRlTaKIXVM9xTz76xxk4yAELG9u79oXrhnLTB5NRRvAZ-bkKn1x8J68nfRTVOIWNPJEA" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
alert(window.location.host);
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("businessMap"));
map.setUIToDefault();
geocoder = new GClientGeocoder();
showAddress('St Margarets Street SW1P 3 London');
}
}
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
// Address could not be located.
jQuery('#googleMap').hide();
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
var html = 'Address info for the marker';
marker.openInfoWindow(html);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
}
);
}
</script>
Any help would be much appreciated.
Thanks.
I've located the problem. It was some conflicting javascript related to Facebook Connect that was calling an FB Connect related page on window.onload, therefore not calling the initialize function within the body onload event.
I should have noticed this conflicting javascript earlier!