ryantss/ryan_first_map.html

## ryan_first_map.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Ryan's Map</title>
  </head>
  <body>
      <div id="map" style="width:800;height:600px;"></div>
      <script type="text/javascript" src="http://gothere.sg/jsapi?sensor=false"> </script>
      <script type="text/javascript">
          gothere.load("maps");
          function initialize() {
            if (GBrowserIsCompatible()) {
              // Create the Gothere map object.
              var map = new GMap2(document.getElementById("map"));

              // map.disableDoubleClickZoom();
              // Set the center of the map.
              var coordinates = new GLatLng(1.362083, 103.819836);
              map.setCenter(coordinates, 11);
              // Add zoom controls on the top left of the map.
              map.addControl(new GSmallMapControl());
              // Add a scale bar at the bottom left of the map.
              map.addControl(new GScaleControl());

              var marker = new GMarker(coordinates);
              map.addOverlay(marker);

              //info window
              // var node = document.createElement("div");
              // node.innerHTML = "Hello world";
              // map.openInfoWindow(coordinates, node);

              console.log(map.getBounds());
              console.log(map.getSize());
              console.log(map.getZoom());
              console.log(map.fromLatLngToContainerPixel(coordinates ));

              //Geocoder
              var geocoder = new GClientGeocoder();
              geocoder.getLatLng("140081", function(latlng){
                if(latlng){
                  var options = {
                      icon: G_DEFAULT_ICON,
                      clickable: true,
                      draggable: false
                  };
                  var marker = new GMarker(latlng, options);
                  map.addOverlay(marker);
                }
              })

              // geocoder.getLocations("470613", function(resp){
              //   if(resp.Status.code == 200){
              //     console.log(resp);

              //     var locations = resp.Placemark;
              //     for(var i=0; i<locations.length; i++){
              //       var location = locations[i];
              //       map.addOverlay(new GMarker(location.Point));
              //     }
              //   }
              // })

              //  EVENT
              // GEvent.addListener(map, "click", function(overlay, latlng, overlayLatlng){
              //     var strOL;
              //     if(overlayLatlng){
              //       strOL = overlayLatlng.lat() + ", " + overlayLatlng.lng();
              //     }else{
              //       strOL = "null";
              //     }
              //     alert("Latlng: " + latlng.lat() + ", "+ latlng.lng() +
              //       "\nOverlayLatlng: " + strOL);
              // })

              // get current positions
              if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(function(position){
                  var coords = new GLatLng(position.coords.latitude, position.coords.longitude);

                  var baseIcon = new GIcon();
                  baseIcon.image = "http://www.google.com/mapfiles/markerA.png";
                  baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                  baseIcon.iconSize = new GSize(20, 34);
                  baseIcon.shadowSize = new GSize(37, 34);
                  baseIcon.iconAnchor = new GPoint(9, 34);
                  baseIcon.infoWindowAnchor = new GPoint(5, 29);

                  var myMarker = new GMarker(coords);

                  map.addOverlay(myMarker);
                  alert("LatLng: "+ position.coords.latitude + ", "+position.coords.longitude);
                });
              } else {
                alert("Failed to get current location");
              }
            }
          }

          gothere.setOnLoadCallback(initialize);
      </script>
  </body>
</html>
	<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
	xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Ryan's Map</title>
	</head>
	<body>
	<div id="map" style="width:800;height:600px;"></div>
	<script type="text/javascript" src="http://gothere.sg/jsapi?sensor=false"> </script>
	<script type="text/javascript">
	gothere.load("maps");
	function initialize() {
	if (GBrowserIsCompatible()) {
	// Create the Gothere map object.
	var map = new GMap2(document.getElementById("map"));

	// map.disableDoubleClickZoom();
	// Set the center of the map.
	var coordinates = new GLatLng(1.362083, 103.819836);
	map.setCenter(coordinates, 11);
	// Add zoom controls on the top left of the map.
	map.addControl(new GSmallMapControl());
	// Add a scale bar at the bottom left of the map.
	map.addControl(new GScaleControl());

	var marker = new GMarker(coordinates);
	map.addOverlay(marker);

	//info window
	// var node = document.createElement("div");
	// node.innerHTML = "Hello world";
	// map.openInfoWindow(coordinates, node);

	console.log(map.getBounds());
	console.log(map.getSize());
	console.log(map.getZoom());
	console.log(map.fromLatLngToContainerPixel(coordinates ));

	//Geocoder
	var geocoder = new GClientGeocoder();
	geocoder.getLatLng("140081", function(latlng){
	if(latlng){
	var options = {
	icon: G_DEFAULT_ICON,
	clickable: true,
	draggable: false
	};
	var marker = new GMarker(latlng, options);
	map.addOverlay(marker);
	}
	})

	// geocoder.getLocations("470613", function(resp){
	// if(resp.Status.code == 200){
	// console.log(resp);

	// var locations = resp.Placemark;
	// for(var i=0; i<locations.length; i++){
	// var location = locations[i];
	// map.addOverlay(new GMarker(location.Point));
	// }
	// }
	// })

	// EVENT
	// GEvent.addListener(map, "click", function(overlay, latlng, overlayLatlng){
	// var strOL;
	// if(overlayLatlng){
	// strOL = overlayLatlng.lat() + ", " + overlayLatlng.lng();
	// }else{
	// strOL = "null";
	// }
	// alert("Latlng: " + latlng.lat() + ", "+ latlng.lng() +
	// "\nOverlayLatlng: " + strOL);
	// })

	// get current positions
	if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(function(position){
	var coords = new GLatLng(position.coords.latitude, position.coords.longitude);

	var baseIcon = new GIcon();
	baseIcon.image = "http://www.google.com/mapfiles/markerA.png";
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(5, 29);

	var myMarker = new GMarker(coords);

	map.addOverlay(myMarker);
	alert("LatLng: "+ position.coords.latitude + ", "+position.coords.longitude);
	});
	} else {
	alert("Failed to get current location");
	}
	}
	}

	gothere.setOnLoadCallback(initialize);
	</script>
	</body>
	</html>