i can code! for Web.

Tuesday, July 5, 2011

Add custom control on Google Map

Modify from the example code in A Simple Google Map demo, custom control of zoomControl and streetViewControl are added in Google Map.

<!DOCTYPE html>
<html>
<head>
<title>A Simple Google Map demo</title>
<style type="text/css">
 html { height: 100% }
 body { height: 100%}
 #mymap { height: 50% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map;

 function InitMap(){
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    zoomControl: true,
    zoomControlOptions: {
     style: google.maps.ZoomControlStyle.LARGE,
     position: google.maps.ControlPosition.LEFT_CENTER},  

    streetViewControl: true,
    streetViewControlOptions: {
     position: google.maps.ControlPosition.RIGHT_BOTTOM} 


  };

  map = new google.maps.Map(document.getElementById("mymap"), options);
 }

 function htmlonload(){
   InitMap();
 }
</script>
</head>
<body onload="htmlonload();">
 <h1>A Simple Google Map demo</h1>
 <div id="mymap"></div>
</body>
</html>

next:
- Mobile web with Google Map

Sunday, July 3, 2011

A Simple Google Map demo

The Google Maps API is a service available for any web site that is free to consumers.

See the terms of service for more information.

Currently, The Maps API is a free service, businesses that charge fees for access, track assets or build internal applications must use Google Maps API Premier, which provides enhanced features, technical support and a service-level agreement.

It's a very simple example to embed Google Maps in HTML using JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>A Simple Google Map demo</title>
<style type="text/css">
html { height: 100% }
body { height: 100%}
#mymap { height: 50% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;

function InitMap(){
 var options = {
   zoom: 2,
   center: new google.maps.LatLng(0, 0),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
 };

 map = new google.maps.Map(document.getElementById("mymap"), options);
}

function htmlonload(){
  InitMap();
}
</script>
</head>
<body onload="htmlonload();">
<h1>A Simple Google Map demo</h1>
<div id="mymap"></div>
</body>
</html>

next:
- Add custom control on Google Map

Wednesday, June 22, 2011

Google Apps Script

Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services.

With Google Apps Script you can:

Automate repetitive business processes (e.g. expense approvals, time-sheet tracking, ticket management, order fulfillment, and much more)
Link Google products with third party services (e.g. send custom emails and a calendar invitation to a list from a MySQL database)
Create custom spreadsheet functions
Build and collect user inputs through rich graphics interfaces and menus (e.g. a company could power an internal application for purchasing office supplies where users could shop via a customized menu interface)

http://code.google.com/googleapps/appsscript/

Google I/O 2011: Developing Apps, Add Ins and More with Apps Script

This intermediate talk focuses on some less well known uses of Apps Script - building Add Ins for Google Apps, standalone applications and more! We'll focus on rapid application development features, and demonstrate deployment to several targets.

Monday, June 20, 2011

Aptana Studio

The current version, Aptana Studio 3, is a open source development tool for the open web.

Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered!

Support Windows, Mac OS X and Linux.

Core Features include:

HTML, CSS, and JavaScript Code Assist Aids in authoring of HTML, CSS, JavaScript, PHP, and Ruby. Supports the latest HTML5 specifications. Includes information about the level of support for each element in the major web browsers.
Deployment Wizard Support for one-shot as well as keep-synchronized setups. Multiple protocols including FTP, SFTP, FTPS and Capistrano. Ability to automatically publish your Ruby & Rails applications to hosting services such as Heroku and Engine Yard.
Integrated Debugger Set breakpoints, inspect variables, control execution. The integrated Ruby & Rails debugger helps you squash those bugs. (JavaScript debugging coming soon.)
Git Integration Easily put your projects under git source code control. Collaborate with team members thru merge, pull and push actions to remote repositories such those hosted on Github. Facilitates git-based deployments.
Built-in Terminal Quickly access a command line terminal for execution of operating system commands and language utilities such as gem, rake, etc.
IDE Customization Setup your development environment exactly the way you want it by extending the core capabilities through scripting of custom commands. Studio ships with hundreds of commands but always presents them in context based on the type of file you are editing.
...

Web Site: http://aptana.com/

Related: How to Add code assist for jQuery in Aptana

Thursday, June 16, 2011

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition()

The post "Simple Geolocation API demo" show how to get one-shot position requests using Geolocation API, navigator.geolocation.getCurrentPosition(). We can get repeated position updates using navigator.geolocation.watchPosition().

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function htmlonload(){


if (window.navigator.geolocation) {
 navigator.geolocation.watchPosition(successCallback, errorCallback);
} else {
 alert("Sorry! your browser does not support Geolocation API.");
}
}

function successCallback(position){
var msg ="";

msg += "Latitude: " + position.coords.latitude + "<br/>";
msg += "Longitude: " + position.coords.longitude + "<br/>";
msg += "Accuracy: " + position.coords.accuracy + "<br/>";
msg += "@" + position.timestamp;

  changeText("MyText", "My Location: " + msg);
}

function errorCallback(error) {
changeText("MyText", "Error: " + error);
}

function changeText(id, text){
document.getElementById(id).innerHTML = text;

}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body onload="htmlonload();">
<h1>Simple Geolocation API demo</h1>
<div id="MyText">Waiting...</div>

</body>
</html>

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition(), run on Android device

Tuesday, June 14, 2011

Mobile optimized HTML with meta viewport

Simple HTML with <meta name="viewport"> tag to make a web page optimized for mobile device.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<title>Test viewport</title>
</head>
<body>

<h1>Test: with viewport on mobile device</h1>


</body>
</html>

With <meta name="viewport"> tag

Without <meta name="viewport"> tag

Javascript to change text

Example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function htmlonload(){
 changeText("MyText", "text changed");
}

function changeText(id, text){
 document.getElementById(id).innerHTML = text;
}

</script>
<meta charset="UTF-8">
<title>Test Text: Javascript to change text</title>
</head>
<body onload="htmlonload();">
<h1>Test Text: Javascript to change text</h1>
<div id="MyText">Hello All</div>

</body>
</html>

Output: