wcpolicarpio/index.html

## index.html
 <html>
   <head>
     <title>Google Maps JavaScript API v3 Example: Map Simple</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
     </script>
   </head>
   <body>
   <div id="googleMap" style="width:100%; height:700px;"></div>
   </body>
 </html>

## jEpEzO.markdown

      
    Raw
  

              jEpEzO.markdown
            
          
    jEpEzO

A Pen by Walter on CodePen.
License.

  
## script.js

var geocoder;
var address = new Array();
var marker = new Array();
var images=["A","B","C","D","E","F","G","H","I","J","K","L"];

function initialize()
{
var locations = '401 Bay St Toronto\;96 Deanscroft Sq Scarborough\;40 King St West Toronto\;100 Symes Road Toronto\;61 Hanna Avenue Toronto\;30 Ordnance Road Toronto\;';
// locations=locations.substring(0,(locations.length)-1);

var map = new google.maps.Map(document.getElementById('googleMap'), {
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 10
});

if(locations=='null' || locations=='')
    locations = 'Toronto, Ontario\;';

address = locations.split('\;');

marker[0] = new google.maps.Marker({
    map:map
});

geocoder = new google.maps.Geocoder();
var i=1;
for(i=0; i<address.length; i++){
  geocodeAddress(map, address[i], i);
}

geocoder.geocode({
    'address': address[0]+", Ontario"
    },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
//         marker[0].setPosition(results[0].geometry.location);
         map.setCenter(results[0].geometry.location);
         new google.maps.Circle({
             center: results[0].geometry.location,
             radius: 1000, // radius * 1000,       // Convert to meters
             fillColor: '#00ff00',
             fillOpacity: 0.2,
             map: map,
             strokeColor : '#0000ff',
             strokeOpacity : 0.3,
             strokeWeight: 1
        });
     }
});
}//End of initialize function.
function geocodeAddress(map, address, i) {
    geocoder.geocode({
          'address': address+", Ontario"
       },function(results, status){
          if(status == google.maps.GeocoderStatus.OK) {
        var marker = createMarker(map, results[0].geometry.location, address, images[i]);
          }
       });
}
function createMarker(map, latlng, address, image) {
        var marker = new google.maps.Marker({
            map: map,
           // icon: 'http://www.google.com/mapfiles/marker'+image+'.png',
          icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' +  image+'|3CCCCC|000000',
            position: latlng
        });
        var info = new google.maps.InfoWindow({
            content: address+', Ontario'
        });
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
  return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);

## style.css
   <style>
       html, body, #map_canvas {
         margin: 0;
         padding: 0;
       height: 100%;
       }
     </style>
	<html>
	<head>
	<title>Google Maps JavaScript API v3 Example: Map Simple</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	</script>
	</script>
	</head>
	<body>
	<div id="googleMap" style="width:100%; height:700px;"></div>
	</body>
	</html>

	var geocoder;
	var address = new Array();
	var marker = new Array();
	var images=["A","B","C","D","E","F","G","H","I","J","K","L"];

	function initialize()
	{
	var locations = '401 Bay St Toronto\;96 Deanscroft Sq Scarborough\;40 King St West Toronto\;100 Symes Road Toronto\;61 Hanna Avenue Toronto\;30 Ordnance Road Toronto\;';
	// locations=locations.substring(0,(locations.length)-1);

	var map = new google.maps.Map(document.getElementById('googleMap'), {
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	zoom: 10
	});

	if(locations=='null' \|\| locations=='')
	locations = 'Toronto, Ontario\;';

	address = locations.split('\;');

	marker[0] = new google.maps.Marker({
	map:map
	});

	geocoder = new google.maps.Geocoder();
	var i=1;
	for(i=0; i<address.length; i++){
	geocodeAddress(map, address[i], i);
	}

	geocoder.geocode({
	'address': address[0]+", Ontario"
	},function(results, status){
	if(status == google.maps.GeocoderStatus.OK) {
	// marker[0].setPosition(results[0].geometry.location);
	map.setCenter(results[0].geometry.location);
	new google.maps.Circle({
	center: results[0].geometry.location,
	radius: 1000, // radius * 1000, // Convert to meters
	fillColor: '#00ff00',
	fillOpacity: 0.2,
	map: map,
	strokeColor : '#0000ff',
	strokeOpacity : 0.3,
	strokeWeight: 1
	});
	}
	});
	}//End of initialize function.
	function geocodeAddress(map, address, i) {
	geocoder.geocode({
	'address': address+", Ontario"
	},function(results, status){
	if(status == google.maps.GeocoderStatus.OK) {
	var marker = createMarker(map, results[0].geometry.location, address, images[i]);
	}
	});
	}
	function createMarker(map, latlng, address, image) {
	var marker = new google.maps.Marker({
	map: map,
	// icon: 'http://www.google.com/mapfiles/marker'+image+'.png',
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + image+'\|3CCCCC\|000000',
	position: latlng
	});
	var info = new google.maps.InfoWindow({
	content: address+', Ontario'
	});
	google.maps.event.addListener(marker, 'click', function() {
	info.open(map, marker);
	});
	return marker;
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	<style>
	html, body, #map_canvas {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	</style>