paco-valdez/latlon.html

## latlon.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #map-canvas{
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var markers = "19.43207436273074,-99.20162916183472\n\
19.43604044670569,-99.20122146606445\n\
19.434300238112474,-99.20137166976929\n\
19.43832697150489,-99.20085668563843\n\
19.438063921618475,-99.19630765914917\n\
19.437962748471772,-99.19304609298706\n\
19.437902044553475,-99.19042825698853\n\
19.43761875930136,-99.18577194213867\n\
19.435898802517418,-99.19630765914917\n\
19.435554808974327,-99.1907286643982\n\
19.43541316436242,-99.18632984161377\n\
19.43527151962695,-99.18281078338623\n\
19.433895535766833,-99.19755220413208\n\
19.433500950008792,-99.19097542762756\n\
19.432924246022402,-99.18160915374756\n\
19.4313863587134,-99.19115781784058\n\
19.427227919452346,-99.19740200042725\n\
19.43162918399349,-99.19688701629639\n\
19.431285181406224,-99.18100833892822\n\
19.426868730531282,-99.1986733675003\n\
19.346770035012366,-99.19011175632477\n\
19.345732425473066,-99.19004738330841\n\
19.348673145604508,-99.19055700302124\n\
19.344639132186515,-99.18847560882568\n\
19.343768541553597,-99.1903692483902\n\
19.35036365607818,-99.1864800453186\n\
19.362712961598092,-99.18920516967773\n\
19.362287837114664,-99.18253183364868\n\
19.33874230832968,-99.19212341308594\n\
19.338722061357203,-99.19038534164429";
markers = markers.split("\n");
var geocoder;
var map;
var marker;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(19.3200988, -99.1521845);
  var mapOptions = {
    zoom: 11,
    center: latlng
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (var i =0 ; i<markers.length ; i++) {
    var row = markers[i].split(",");
     console.log( "Latitude, Longitude: "+row[0]+","+row[1] );
    var tmark =  new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(row[0], row[1]),
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    });
  }


  google.maps.event.addListener(map, 'click', function(event){
    console.log( "Latitude, Longitude: "+event.latLng.lat()+","+event.latLng.lng() );
    if (marker){
        marker.setMap(null);
    }
    marker = new google.maps.Marker({
      map: map,
      position: event.latLng,
      icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
    });
    var infowindow = new google.maps.InfoWindow({
        content: '<p>'+event.latLng.lat()+","+event.latLng.lng()+'</p>'
    });
    infowindow.open(map,marker);
  });
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <!--<textarea rows="10" cols="50" id="address" >Ciudad de Mexico, Mexico</textarea>-->
      <!--<input type="button" value="Geocode" onclick="codeAddress()">-->
    </div>
    <div id="map-canvas"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Geocoding service</title>
	<style>
	html, body {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	#map-canvas{
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	#panel {
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -180px;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
	<script>
	var markers = "19.43207436273074,-99.20162916183472\n\
	19.43604044670569,-99.20122146606445\n\
	19.434300238112474,-99.20137166976929\n\
	19.43832697150489,-99.20085668563843\n\
	19.438063921618475,-99.19630765914917\n\
	19.437962748471772,-99.19304609298706\n\
	19.437902044553475,-99.19042825698853\n\
	19.43761875930136,-99.18577194213867\n\
	19.435898802517418,-99.19630765914917\n\
	19.435554808974327,-99.1907286643982\n\
	19.43541316436242,-99.18632984161377\n\
	19.43527151962695,-99.18281078338623\n\
	19.433895535766833,-99.19755220413208\n\
	19.433500950008792,-99.19097542762756\n\
	19.432924246022402,-99.18160915374756\n\
	19.4313863587134,-99.19115781784058\n\
	19.427227919452346,-99.19740200042725\n\
	19.43162918399349,-99.19688701629639\n\
	19.431285181406224,-99.18100833892822\n\
	19.426868730531282,-99.1986733675003\n\
	19.346770035012366,-99.19011175632477\n\
	19.345732425473066,-99.19004738330841\n\
	19.348673145604508,-99.19055700302124\n\
	19.344639132186515,-99.18847560882568\n\
	19.343768541553597,-99.1903692483902\n\
	19.35036365607818,-99.1864800453186\n\
	19.362712961598092,-99.18920516967773\n\
	19.362287837114664,-99.18253183364868\n\
	19.33874230832968,-99.19212341308594\n\
	19.338722061357203,-99.19038534164429";
	markers = markers.split("\n");
	var geocoder;
	var map;
	var marker;
	function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(19.3200988, -99.1521845);
	var mapOptions = {
	zoom: 11,
	center: latlng
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	for (var i =0 ; i<markers.length ; i++) {
	var row = markers[i].split(",");
	console.log( "Latitude, Longitude: "+row[0]+","+row[1] );
	var tmark = new google.maps.Marker({
	map: map,
	position: new google.maps.LatLng(row[0], row[1]),
	icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
	});
	}


	google.maps.event.addListener(map, 'click', function(event){
	console.log( "Latitude, Longitude: "+event.latLng.lat()+","+event.latLng.lng() );
	if (marker){
	marker.setMap(null);
	}
	marker = new google.maps.Marker({
	map: map,
	position: event.latLng,
	icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
	});
	var infowindow = new google.maps.InfoWindow({
	content: '<p>'+event.latLng.lat()+","+event.latLng.lng()+'</p>'
	});
	infowindow.open(map,marker);
	});
	}


	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="panel">
	<!--<textarea rows="10" cols="50" id="address" >Ciudad de Mexico, Mexico</textarea>-->
	<!--<input type="button" value="Geocode" onclick="codeAddress()">-->
	</div>
	<div id="map-canvas"></div>
	</body>
	</html>