gmap

4258 ワード
JavaScript js。 Google 

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>  </title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
<script type="text/javascript"> 
 
  var poly;
  var map;
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
 

   var geocoder;
  function initialize() {
     geocoder = new google.maps.Geocoder();
    var centerPoint = new google.maps.LatLng(23.0999442125314, 113.203125);
    var myOptions = {
      zoom: 4,
      center: centerPoint,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 
    var polyOptions = {
      strokeColor: 'red',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new google.maps.Polyline(polyOptions);
    poly.setMap(map);
	directionsDisplay = new google.maps.DirectionsRenderer();
	directionsDisplay.setMap(map);
	 var point = new google.maps.LatLng (37.37015718405753, 114.609375);
      addLatLng(point,'A ',' ','2011-11-21');
	  
	   var point = new google.maps.LatLng (39.13006024213511, 115.48828125);
      addLatLng(point,'B ',' ','2012-01-01');
      
      var point = new google.maps.LatLng(23.241346102386135, 114.169921875);
      addLatLng(point,'  ','xx','2012-01-16');
	   //calcRoute('37.37015718405753, 114.609375','39.13006024213511, 115.48828125');
	   //calcRoute('39.13006024213511, 115.48828125','23.241346102386135, 114.169921875');
  }
  </script>
  
  <script type="text/javascript"> 
 
  function addLatLng(point,mytitle,myname,time) {
    var path = poly.getPath();
    path.push(point);
 
    var marker = new google.maps.Marker({
      position: point,
      title: mytitle,
      map: map
    });
	
	//    
   // codeLatLng(point);
    geocoder.geocode({'latLng': point}, function(results, status) {
    	 if (status == google.maps.GeocoderStatus.OK) {
    	 	 if (results[1]) {
    	 	 	
    	 	 	 	var con='  ： '+myname +'<br>   ： '+time+' <br>   ：'+ results[1].formatted_address;
	        attachSecretMessage(marker,con);
    	 	 	}
    	 	} else {

        alert("Geocoder failed due to: " + status);

      }
    	});

  }
 
 
 function attachSecretMessage(marker,mycontent) {
  var infowindow = new google.maps.InfoWindow(
      { content: mycontent,
        size: new google.maps.Size(50,50)
      });
	  
  google.maps.event.addListener(marker, 'click', function(response) {
    
	
	
    infowindow.open(map,marker);
	map.setCenter(marker.position);
	 map.setZoom(6);
  });
}
 
 //     
 function calcRoute(start,end) {
  
  var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
 
</script> 
</head> 
<body onload="initialize()">
  <div id="map_canvas"></div> 
</body> 
</html>
JSP(コードの位置)