Outwalk website almost done
The Outwalk website is nearly ready for people to use :-). I’m going to run through quickly how to use the site and embed a map from Outwalk into a blog or website. First you have to upload your Outwalk session to our servers, and for this you need to have an active account with us so please read this previous post on how to do this. Once the session has been uploaded you'll need to log in at outwalk.vivosystems.co.uk, if you're already logged in, then great just press refresh and your new Outwalk session will be added to the list.
All you have to do in order to see the map is to click on the Outwalk session you wish to view in the "Your Outwalk Session" section, this will then update the map with your chosen session. Once you’ve chosen a session you can now view the source and this is done by clicking the "View Source" link. Please note that when you first log in and are placed on this page the link will not work as you haven’t yet selected a map to view.
How to embed the source into a blog or website?
This is fairly simple and once you’ve done it once you should get the hang of it. First you need to go to http://code.google.com/apis/maps/signup.html and get a Google maps API key which enabled you to show the maps on your website or blog. Once you’ve signed up you’re looking for the following box, making sure the maps API version you’re using is version 2 and set the "sensor=true_or_false" to false.
You can add the script tag into almost any part of the website, but it is recommended that it be placed within the head section of the website, between the <head> and </head> tags. If you’re using a blog you’ll have to click on the “Edit Html” functionality to manually enter this script tag.
You’ll then need to copy the source code from the Outwalk website. If you have access to hosting then it is easier to copy the source into a new JavaScript file and place it on the web and reference it like we’re doing (see below) in the head section. This is because some blogs such as blogger which we’re using enter <br /> or new line tags into the JavaScript code which makes the JavaScript code incorrect and therefore will not work.
<script type="text/javascript" language="javascript" src="http://outwalk.vivosystems.co.uk/android/js/OutwalkExample.js"></script>
If you don’t have access to hosting then you can go through the source code and remove all new lines so the code is hard to read but on a single line and then copy this into the blog. It should read something like this.
<script type="text/javascript">function getNewMap(){var map = new GMap2(document.getElementById("map"));........}</script>
This code can typically go anywhere. In order to create the map you also need to make a div element with its id attribute set to “map” where you want the map to be displayed on the web page or blog like this, the style attributes are optional and you can configure the map to however large you want, we’ve set it to 500 pixels by 400 pixels.
<div id="map" style="width:500px; height:400px" >
//this is where the map will be displayed
</div>
Now the final touches, if you want the map to be loaded as soon as the page loads, and you have access to the HTML for this page then in the body tag <body>
Place this code onload=”getNewMap();”, if you don’t have access to this then place a call to the function in the getNewMaps script tags, for instance :
<script type="text/javascript">getNewMap();function getNewMap(){var map = new GMap2(document.getElementById("map"));..}</script62;
Additionally if you want it to be loaded from a click of a link or page element then within the page elements tags place the following code onclick=”getNewMap(); return false;”. If you’re using this in an anchor tag, then return false means that it won’t follow the hyper link, if you return true then it will follow the hyperlink once the JavaScript has been executed.
Now the map will be displayed on your web page. Please leave comments if you have any problems.
You can learn more about Google Maps and JavaScript by clicking the links.
All you have to do in order to see the map is to click on the Outwalk session you wish to view in the "Your Outwalk Session" section, this will then update the map with your chosen session. Once you’ve chosen a session you can now view the source and this is done by clicking the "View Source" link. Please note that when you first log in and are placed on this page the link will not work as you haven’t yet selected a map to view.
How to embed the source into a blog or website?
This is fairly simple and once you’ve done it once you should get the hang of it. First you need to go to http://code.google.com/apis/maps/signup.html and get a Google maps API key which enabled you to show the maps on your website or blog. Once you’ve signed up you’re looking for the following box, making sure the maps API version you’re using is version 2 and set the "sensor=true_or_false" to false.
You can add the script tag into almost any part of the website, but it is recommended that it be placed within the head section of the website, between the <head> and </head> tags. If you’re using a blog you’ll have to click on the “Edit Html” functionality to manually enter this script tag.
You’ll then need to copy the source code from the Outwalk website. If you have access to hosting then it is easier to copy the source into a new JavaScript file and place it on the web and reference it like we’re doing (see below) in the head section. This is because some blogs such as blogger which we’re using enter <br /> or new line tags into the JavaScript code which makes the JavaScript code incorrect and therefore will not work.
<script type="text/javascript" language="javascript" src="http://outwalk.vivosystems.co.uk/android/js/OutwalkExample.js"></script>
If you don’t have access to hosting then you can go through the source code and remove all new lines so the code is hard to read but on a single line and then copy this into the blog. It should read something like this.
<script type="text/javascript">function getNewMap(){var map = new GMap2(document.getElementById("map"));........}</script>
This code can typically go anywhere. In order to create the map you also need to make a div element with its id attribute set to “map” where you want the map to be displayed on the web page or blog like this, the style attributes are optional and you can configure the map to however large you want, we’ve set it to 500 pixels by 400 pixels.
<div id="map" style="width:500px; height:400px" >
//this is where the map will be displayed
</div>
Now the final touches, if you want the map to be loaded as soon as the page loads, and you have access to the HTML for this page then in the body tag <body>
Place this code onload=”getNewMap();”, if you don’t have access to this then place a call to the function in the getNewMaps script tags, for instance :
<script type="text/javascript">getNewMap();function getNewMap(){var map = new GMap2(document.getElementById("map"));..}</script62;
Additionally if you want it to be loaded from a click of a link or page element then within the page elements tags place the following code onclick=”getNewMap(); return false;”. If you’re using this in an anchor tag, then return false means that it won’t follow the hyper link, if you return true then it will follow the hyperlink once the JavaScript has been executed.
Now the map will be displayed on your web page. Please leave comments if you have any problems.
You can learn more about Google Maps and JavaScript by clicking the links.
One final thing; your web browser must support JavaScript and have it enabled in order for most of this to work.
posted by Phil at
1:19 AM
0 Comments:
Post a Comment
<< Home