var map;
var marker;
var geocoder;
var initPoint;
var address;
var zoom;

function gmapLoad() {
  if (GBrowserIsCompatible()) {
    initPoint = new GLatLng(37.3980252556556,140.38837552070618);
    map = new GMap2(document.getElementById("g_map"));
    map.addControl(new GSmallMapControl());
    geocoder = new GClientGeocoder();
				
    map.setCenter(initPoint, 13);
    updateStaticMap();
				
    GEvent.addListener(map,"moveend",function(){
      updateStaticMap();
      var center = map.getCenter();
    });

    clickEvent = GEvent.addListener(map, "click", function(marker,point){
      setMarker(point);
      updateStaticMap();
    }); 
  }
}

function setMarker(point){
  map.clearOverlays();

  marker = new GMarker(point, { draggable: true });
  map.addOverlay(marker);
  updateStaticMap();
		
  GEvent.removeListener(clickEvent);
		
  GEvent.addListener(marker, 'dragend', function() {
    updateStaticMap();
  });
}

function removeMarker(){
  map.clearOverlays();
  
  marker = null;
  updateStaticMap();
		
  clickEvent = GEvent.addListener(map, "click", function(marker,point){
    setMarker(point);
    updateStaticMap();
  }); 
}

function showAddress() {
  var address = document.getElementById("mapAddress").value;
  var zoom = map.getZoom();
		
  if (geocoder) {
    geocoder.getLatLng(address,
    function(point) {
      if (!point) {
        alert(address + " \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002");
      } else {
        map.setCenter(point, zoom);
        updateStaticMap();
      }
    });
  }
}

function updateStaticMap() {
  var url = "http://maps.google.com/staticmap?";
  var mapCenter = map.getCenter();
  url += "&center=" + mapCenter.y + "," + mapCenter.x;
  if (marker) {
    var markerPoint = marker.getPoint();
    var markerColor = document.getElementById("markerColor").value;
    var markerTypo = document.getElementById("markerTypo").value;
    url += "&markers=" + markerPoint.y + "," + markerPoint.x + "," + markerColor + markerTypo;	
  }
  url += "&zoom=" + map.getZoom();
  url += "&size=" + document.getElementById("mapWidth").value + "x" + document.getElementById("mapHeight").value;
  var img = document.createElement("img");
  img.src = url + "&key=ABQIAAAAnJJKUu9Ef0d5NjUlSp_VJRT9sTxYssqfqRHdrMbMIDEunsZNXhR9ufKuvCKtdgtLNf9rPS2HQjGC6Q";
		
  document.getElementById("static_gmap").innerHTML = "";
  document.getElementById("static_gmap").appendChild(img);
  document.getElementById("static_url").value = "<img src=\"" + url + "&key=Your API Key\" />";
}