trtg · October 25, 2012 04:53 · NeleenM · Nov 11, 2018
diff --git a/gistfile1.js b/gistfile1.js
 <html> 
 <head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
 </head> 
 <body>
  <div id="map" style="width: 500px; height: 400px;"></div>


  <script type="text/javascript">
      //test of geocoding addresses
      var address = "901 E. Santa Clara St., San Jose, CA 95116";
      var destination = "200 East Santa Clara Street, San Jose, CA 95113";
  var map = new google.maps.Geocoder();
  var map_center_lat=0;
  var map_center_lng=0;

  //html5 location api:
  navigator.geolocation.getCurrentPosition(function(d){
          console.log(d);
          });


 var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

 //use the user's current location as determined via html5 geolocation
 //to set the center of the map
    function drawMap(){
      //center: new google.maps.LatLng(-33.92, 151.25),
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(map_center_lat, map_center_lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        console.log("in click listener");
        console.log(locations[i][0]);
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
 }

 //The code below is all you need to geocode an address
 //if you pass lat,lng to map.geocode you will get the reverse geocoded address
 map.geocode({'address' : address }, function(results, status){
          map_center_lat = results[0].geometry.location.lat();
          map_center_lng = results[0].geometry.location.lng();

          //this callback function gets called asynchronously so trying
          //to print the value of map_center_lat and lng outside of here
          //may give unexpected results
          console.log("map_center_lat " +map_center_lat);
          console.log("map_center_lng " +map_center_lng);
          //crazy quote escaping in action
          var directions_link = 'Click <a href=\'http://maps.google.com/maps?saddr=\x22'+address+  '\x22&daddr=\x22'+destination +'\x22\'>here </a> for driving directions to:<br> '+destination
          console.log(directions_link)

 locations.push([directions_link,map_center_lat,map_center_lng])
          console.log(locations)
          drawMap();
          });


 </script>
 </body>
 </html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Google Maps Multiple Markers</title>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	</head>
	<body>
	<div id="map" style="width: 500px; height: 400px;"></div>


	<script type="text/javascript">
	//test of geocoding addresses
	var address = "901 E. Santa Clara St., San Jose, CA 95116";
	var destination = "200 East Santa Clara Street, San Jose, CA 95113";
	var map = new google.maps.Geocoder();
	var map_center_lat=0;
	var map_center_lng=0;

	//html5 location api:
	navigator.geolocation.getCurrentPosition(function(d){
	console.log(d);
	});


	var locations = [
	['Bondi Beach', -33.890542, 151.274856, 4],
	['Coogee Beach', -33.923036, 151.259052, 5],
	['Cronulla Beach', -34.028249, 151.157507, 3],
	['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
	['Maroubra Beach', -33.950198, 151.259302, 1]
	];

	//use the user's current location as determined via html5 geolocation
	//to set the center of the map
	function drawMap(){
	//center: new google.maps.LatLng(-33.92, 151.25),
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 10,
	center: new google.maps.LatLng(map_center_lat, map_center_lng),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var infowindow = new google.maps.InfoWindow();

	var marker, i;

	for (i = 0; i < locations.length; i++) {
	marker = new google.maps.Marker({
	position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	map: map
	});

	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	console.log("in click listener");
	console.log(locations[i][0]);
	infowindow.setContent(locations[i][0]);
	infowindow.open(map, marker);
	}
	})(marker, i));
	}
	}

	//The code below is all you need to geocode an address
	//if you pass lat,lng to map.geocode you will get the reverse geocoded address
	map.geocode({'address' : address }, function(results, status){
	map_center_lat = results[0].geometry.location.lat();
	map_center_lng = results[0].geometry.location.lng();

	//this callback function gets called asynchronously so trying
	//to print the value of map_center_lat and lng outside of here
	//may give unexpected results
	console.log("map_center_lat " +map_center_lat);
	console.log("map_center_lng " +map_center_lng);
	//crazy quote escaping in action
	var directions_link = 'Click <a href=\'http://maps.google.com/maps?saddr=\x22'+address+ '\x22&daddr=\x22'+destination +'\x22\'>here </a> for driving directions to:<br> '+destination
	console.log(directions_link)

	locations.push([directions_link,map_center_lat,map_center_lng])
	console.log(locations)
	drawMap();
	});


	</script>
	</body>
	</html>