this is the first time I posted something in stackoverflow. Greetings!!
So, I'm tryin' to start a web app using Nokia Maps, so I went to samples and code (copy and paste) the code I encountered. Nothing is displayed.
I know I need to have an app_id and app_code. I have two pf them.
From developer.here.com, when I select a Create App link, a Solution Selection screen appears. I have two app_id and app_code selecting "Web and Web experiences" and "Web and Geocoder & Batch Geocoder".
I guess that the codes aren't valid. But, what kind of solution I need to choose??
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<script src="http://js.api.here.com/se/2.5.3/jsl.js" type="text/javascript" charset="utf-8"> </script>
<script type="text/javascript">
nokia.Settings.set("app_id", "My_app_id");
nokia.Settings.set("app_code", "My_app_code");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
// Zoom level for the map
zoomLevel: 10,
// Map center coordinates
center: [52.51, 13.4]
}
);
</script>
</head>
<body>
<div id="mapContainer"></div>
</body>
Try adding a height and width to your map container.
<div id="mapContainer" style="width:540px; height:334px;"></div>
If your app_id and app_code are invalid you should at least get a grey box.
If you place the <div> before the <script> tag then it will be present in the DOM when the script is running. This should work:
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script type="text/javascript">
nokia.Settings.set("app_id", "My_app_id");
nokia.Settings.set("app_code", "My_app_code");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
zoomLevel: 10,
center: [52.51, 13.4]
});
</script>
Also open firebug and see if any map tiles are being downloaded or if you have any JavaScript errors.
Related
I'm just starting to use Google Maps API and have run into problems with API. I am using code from Good Maps example and it works with Chrome and Firefox but nothing shows up in IE 10.
I've searched topics without help. I have added https://maps.google.com to safe site in IE, tried the v=3.28 trick, also tried meta tags for backwards compatibility, without any success.
Following is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="map" style="width:100%;height:1200px;"></div>
<script>
function initMap() {
var myLatLng = { lat: 32.681390, lng: -97.108682 };
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
</script>
</body>
</html>
The above markup doesn't show any map in IE 10. I'm unable to move forward. I'm just starting out with this and wanted to use it in an updatepanel in asp.net 4.5. But at the moment, simple html isn't working for me.
Any suggestions?
Thank you.
I am using google maps in my asp.net project. When I type some address, i get suggestions, I pick one of them and map is shown related to that address. This works fine. But I want that user types address in a custom textbox on page 1 and i take that input and populate maps textbox on page 2 as well as show map on page 2 related to address.
here is how I am doing it
$(document).ready(function() {
// Empty the value on page load
$("#formattedAddress").val("");
// variable to indicate whether or not enter has been pressed on the input
var enterPressedInForm = false;
var input = document.getElementById("inputName");
var options = {
componentRestrictions: {country: 'uk'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
$("#formName").submit(function(e) {
// Only submit the form if information has been stored in our hidden input
return $("#formattedAddress").val().length > 0;
});
$("#inputName").bind("keypress", function(e) {
if(e.keyCode == 13) {
// Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.
// We change this variable to indicate that enter has been pressed in our input field
enterPressedInForm = true;
}
});
// This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
if(autocomplete.getPlace() !== undefined) {
$("#formattedAddress").val(autocomplete.getPlace().formatted_address);
}
// If enter has been pressed, submit the form.
if(enterPressedInForm) {
$("#formName").submit();
}
});
});
Regards,
Asif Hameed
You can send variables to other pages (or the same page) with the hashtag. Anything to the right hand side of the # is ignored by the server, but can be read/set by javascript.
Like on page 1 you have
25
50
This value can be read by page2, like this:
var pos = location.hash.substr(1);
Here is an example with your form
page1.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1 - type address</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
$('#formName').on('submit', function(e) {
// read address
var address = $('#formattedAddress').val();
// add hash to page 2
window.location = 'page2.htm#' + address;
// prevent real submit
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<form id="formName">
<input id="formattedAddress" placeholder="Enter address"/>
<input type="submit" value="submit" />
</form>
</body>
</html>
page2.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2 - populate map</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
if(location.hash) {
var address = location.hash.substr(1);
$('#test').html(address);
}
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Tell me if you have difficulties applying this to a Google Maps webpage.
Try out passing coordinates to page2.
like "page2.htm#50.24/4.45" =>
var variables = location.hash.substr(1);
var position = variables.split('/');
var lat = Number(position[0]);
var lng = Number(position[1]);
Or pass the search string. That should work too.
I have a database in firebase and I want to make it public like https://publicdata-transit.firebaseio.com/sf-muni
What I see here they have a prefix "pulicdata", How do I get it?
A publicly accessible read-only dashboard, like the one you're referring to, is only available for apps managed by Firebase themselves. You cannot enable it on your own applications.
This won't do any formatting (you can make it pretty if you want), but this will take your snapshot and just put it up on the screen for anyone to see as long as you have your settings for read as true.
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('value', function(snapshot) {
displaySnapshot(snapshot.val());
});
function displaySnapshot(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
$('#displaySnapshotDiv')[0].scrollTop = $('#displaySnapshotDiv')[0].scrollHeight;
};
</script>
</body>
</html>
If you want it to be a little more readable, you could do something like:
<!-- language: lang-html -->
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
displaySnapshotNeatly(snapshot.val());
});
function displaySnapshotNeatly(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
};
</script>
</body>
</html>
Here is the second one working in JSFiddle: https://jsfiddle.net/lukeschlangen/rzfn45pz/
And here is the second one with your firebase data (please tell me the security settings for writing are set to something other than true?): https://jsfiddle.net/lukeschlangen/rzfn45pz/2/
It seems like you might want to do some formatting, but this is displaying all of the data.
The data can be available public if you change your database rules to true or use the auth token for authentication. But since you do not want to authenticate access, all you simply need to do is Make you access rules public
for more information check out: https://firebase.google.com/docs/reference/rest/database/
enter image description here
I'm trying to do something I thought quite straight forward. Obviously it's not! I use the head.js lib to asynchronously load the Google Maps API :
<!doctype html>
<html>
<head>
<title>Map - Async example</title>
</head>
<body>
<div id="id" style="width:600px;height:400px;"></div>
<script src="header.js" type="text/javascript">
<script type="text/javascript">
head.js('https://maps.googleapis.com/maps/api/js?=3.exp&sensor=false&callback=google_callback');
var google_callback = function ( ) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('id'), mapOptions);
}
</script>
</body>
</html>
But nothing shows up. Any idea/suggestion ?
The closing script-tag for header.js is missing
Example
-- begin: index.html --
<!doctype html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe src="iframe.html" id="innerFrame">blah</iframe>
</body>
</html>
-- end: index.html --
-- begin: iframe.html --
<!doctype html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<form>
<input id="inputField" type="text" value="this is text." />
</form>
<script type="text/javascript">
$('inputField').set('value', 'updated text');
</script>
</body>
</html>
-- end: iframe.html --
Currently, $('inputField').set('value', 'updated text'); doesn't work :-\
Yes, assuming the iframe and it's parent window are on the same domain, it is possible to load the Mootools scripts once in the parent, and then programmatically extend the IFrame's window and document, instead of re-loading the script within the iframe. It is not the default behavior, as you've noticed, and probably for good reason - I'm guessing most people will tell you it's more trouble than it's worth.
In fact, the IFrame shortcut element constructor used to do that exact thing, but it was ultimately considered to be too much of a hack and not worth the effort to maintain as part of the framework long-term, so they dropped it - this why the documentation for IFrame is kind of odd ("IFrame Method: constructor, Creates an IFrame HTML Element and extends its window and document with MooTools.", and then right below after the example, "Notes: An IFrame's window and document will not be extended with MooTools methods.").
So, the most straightforward way to have $(..) useable in your iframe is just to have the iframe include the Mootools script. If you're feeling fancy, you could also have your parent window inject the Mootools script into the iframe's HEAD, for example:
index.html
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
type: 'text/javascript',
src: "mootools.js",
events: {
load: function(){
//passed to mooFrame by the iframe
this.pageReady();
}.bind(this)
}
});
this.contentDocument.head.appendChild(mooEl);
}
}
});
</script>
</body>
</html>
iframe.html
<html>
<head>
<title>Iframe</title>
</head>
<body>
<div id="iframe_element"></div>
<script type="text/javascript">
parent.mooFrame.pageReady = function(){
/* Put your iframe javascript in here */
$('iframe_element').set("text", "Fancy!");
};
</script>
</body>
</html>
Update (July 29th): I was fooling around with this idea again and realized there's a fairly obvious though pretty ham-fisted way to transfer Mootools functionality defined in the parent index.html window to the inner iframe: simply include the entire Mootools source into the parent window (remove the src attribute from the existing script element and add an id), and copy that newly enormous element's text into the new script node that gets injected into the head of the iframe. Inlining the Mootools code in the script element in this fashion gives you access to the contents of the element, which you don't get when the javascript is loaded from an external file via the src attribute.
Of course, this..concept is only relevant if the parent window and iframe are on the same-domain, (same as the code provided above).
The obvious drawback is that the Mootools source isn't cached. I'm not sure if there's a use-case where this method would be more optimal than just including mootools in both parent and iframe. In any event, change the index.html file to this:
<html>
<head>
<title>Parent</title>
<script type="text/javascript" id="mootools_js">
**COPY-PASTE THE CONTENTS OF mootools-core.js HERE**
</script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
id: 'mootools_iframe_core',
type: 'text/javascript',
html: $('mootools_js').innerHTML
});
this.contentDocument.head.appendChild(mooEl);
this.pageReady();
}
}
});
</script>
</body>
</html>
My previous answer offered two alternative ways of doing the task in question ("load Mootools in a parent frame and then re-use it in iframes"). The first method didn't "re-use" the Mootools functionality loaded into the parent frame, but was rather an alternative way to load the script in the inner iframe. The second method was just a hacky way of copying over the script by putting the entire mootools core source inline in a script element and then copying that element's content into a script element in the iframe's head (hardly optimal).
This following method does programatically extend the window and document objects of the inner iframe. Again, it is assumed that both the parent page and the iframe are on the same domain.
In my (brief and simple) testing, loading the source in both parent and iframe resulted in 72.1 KB transferred at around 130ms (to finish loading both the parent and iframe pages), while the page that loaded the source and then extended the iframe was 36.8 KB and took around 85ms to load both parent and iframe. (that's with gzip on the server...file size of uncompressed/unminified core source is around 134 kb).
For this method a few trivial additions/edits are made to the mootools core source. Download an uncompressed version of mootools-core-1.3.2.js, and rename it to 'mootools-core-init.js' (or whatever). The following steps assume that you checked all boxes on the core builder page except 'Include Compatibility'.
Add this to the top of the 'mootools-core-init.js' file (above the first self-calling anonymous function):
var initMootoolsCore = function(){
var window = this;
var document = this.document;
Add this to the very bottom of the core js file:
};
initMootoolsCore.call(window);
Do the following find/replace tasks:
1
Find:})();
Replace: }).call(this);
2
Find: if (Browser.Element) Element.prototype = Browser.Element.prototype;
Replace: if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;
3
Find: var IFrame = new Type
Replace: var IFrame = this.IFrame = new Type
4
Find: var Cookie = new Class
Replace: var Cookie = this.Cookie = new Class
(download | compressed version)
In your parent index.html file, put the following script element in the head
<script type="text/javascript" src="mootools-core-init.js"></script>
Finally, in your iframe.html file, put the following inline script element in the head to extend the iframe's window and document (it must be before any included or inline scripts that need to use Mootools):
<script type="text/javascript">parent.initMootoolsCore.call(window);</script>
No, the iframe.html is an independent page. It does not "inherit" anything from the previous page.