Simple Google Map with two Markers with InfoWindows and custom SVG marker

Google Maps API has a few predetermined shapes including the classic red marker, arrows, and circles. You can also use your own image. For more options, you can draw custom SVG shapes using SVG path notation.

<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Google Map with two Markers with InfoWindows and custom SVG marker</title>
		font-family: Arial;
		font-size: 16px;
	#map-canvas, #side-bar {        
		height: 500px;
		width: 600px;        
	pre {
		border:1px solid #D6E0F5;
	/* fix for unwanted scroll bar in InfoWindow */
	.scrollFix {
		line-height: 1.35;
		overflow: hidden;
		white-space: nowrap;

	<script src="" type="text/javascript"></script>	    	
	<script type="text/javascript">

	"use strict";

		// variable to hold a map
		var map;
		// variable to hold current active InfoWindow
		var activeInfoWindow ;		

		// ------------------------------------------------------------------------------- //
		// initialize function		
		// ------------------------------------------------------------------------------- //
		  function initialize() {
			// map options - lots of options available here 
			var mapOptions = {
			  zoom : 10,
			  draggable: true,
			  center : new google.maps.LatLng(44.9600, -93.1000),
			  mapTypeId : google.maps.MapTypeId.ROADMAP
			// create map in div called map-canvas using map options defined above
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			// define two Google Map LatLng objects representing geographic points
			var stPaul 			= new google.maps.LatLng(44.95273,-93.08915);
			var minneapolis 	= new google.maps.LatLng(44.97994,-93.26630);

			// place two markers
			fnPlaceMarkers(stPaul,"St Paul", "blue");

		// ------------------------------------------------------------------------------- //
		// create markers on the map
		// ------------------------------------------------------------------------------- //
		function fnPlaceMarkers(myLocation,myCityName,fillColour){
			// create SVG Icon
			// The lowercase 'm' is "relative" moveto
			// the lowercase 'z' closes the path
			// more on SVG path command:
			var myIcon = {				
				path: 'M  0,0,  0,-40,  20,-30 , 0,-20,  z',
				fillColor: fillColour,
				fillOpacity: 0.7,
				scale: 1,
				strokeColor: 'black',
				strokeWeight: 2

			// create marker and put it on map
			var marker = new google.maps.Marker({
				position: myLocation,
				icon: myIcon,
				map: map

			// create an InfoWindow
			var infoWnd = new google.maps.InfoWindow();			
			// add content to your InfoWindow
			infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');
			// add listener on InfoWindow - close last infoWindow  before opening new one 
			google.maps.event.addListener(marker, 'click', function() {
				//Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Open InfoWindow, marker);

				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd;
		// ------------------------------------------------------------------------------- //
		// initial load
		// ------------------------------------------------------------------------------- //		
		google.maps.event.addDomListener(window, 'load', initialize);
	<a href="../index.php">BACK</a><br>	
	<h3>Simple Google Map with two Markers with InfoWindows and custom SVG marker</h3>
		<li>Click on Marker to activate infoWindow</li>		
		<li>Click on other marker or X in right corner or other Marker to close infoWindow</li>		
		<div id="map-canvas"></div>