GOOGLE API/where.html

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>A Map of Information</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">

    <!-- If you are in China, you may need to use theis site for the Google Maps code
    <script src="https://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
    
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="where.js"></script>
    <script>

      function initialize() {
        alert("To see the title of a marker, hover over the marker but don't click.");
        var myLatlng = new google.maps.LatLng(37.39361,-122.099263)
        var mapOptions = {
          zoom: 3,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        i = 0;
        var markers = [];
        for ( pos in myData ) {
            i = i + 1;
            var row = myData[pos];
		    window.console && console.log(row);
            // if ( i < 3 ) { alert(row); }
            var newLatlng = new google.maps.LatLng(row[0], row[1]);
            var marker = new google.maps.Marker({
                position: newLatlng,
                map: map,
                title: row[2]
            });
            markers.push(marker);
<!-- New options for MarkerClusterer function to display markers -->
	    var options = {
			imagePath: 'https://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
			}	
        }
<!-- New var -->
	var markerCluster = new MarkerClusterer(map, markers, options);
      }
    </script>
  </head>
  <body onload="initialize()">
<div id="map_canvas" style="height: 500px"></div>
<p><b>About this Map</b></p>
<p>
This is a cool map from 
<a href="https://www.py4e.com">www.py4e.com</a>.
</p>
</body>
</html>