Google Map

Markers Icon

by arcm111

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>

CSS

body, html
{
	height: 100%;
	margin: 0;
	padding: 0;
}
#map-canvas
{
	width: 100%;
	height: 100%;
	background: #eee;
	border: 1px solid #333;
	box-sizing: border-box;
}

JavaScript

var map;
var url1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var url2 = "http://maps.google.com/mapfiles/ms/micons/green.png";
var icon1 = {
    url: url1,
    size: new google.maps.Size(26, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
};
var icon2 = {
    url: url2,
    size: new google.maps.Size(26, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
};

function initialize()
{
	var canvas = document.getElementById ('map-canvas');
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng (39.222869, 46.602673),
		mapTypeId: google.maps.MapTypeId.TERRAIN,
		zIndex: 3
	};

	// Set map    
	map = new google.maps.Map (canvas, mapOptions);
	// adding to add markers
	var locations = [
		['Location1', 39.031586, 46.590031, 5],
		['Location2', 38.998439, 46.557591, 4],
		['Location3', 38.913429, 46.547370, 3],
		['Location4', 39.090245, 46.703794, 2],
		['Location5', 39.130588, 46.696239, 1]
	];
	// adding infowindow
	var infowindow = new google.maps.InfoWindow();
	//announce my variables
	var markers = [];
	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,
			icon: icon1
		});
		marker.setIcon (icon1);

		google.maps.event.addListener (marker, 'mouseover',
		(function (marker, i)
		{
			return function (event)
			{
				infowindow.setContent (locations[i][0]);
				infowindow.open (map, marker);
				marker.setIcon (icon2);
			}

		})(marker, i));
		markers.push (marker); // save all markers

		google.maps.event.addListener (marker, 'mouseout',
		(function (marker)
		{
			return function (event)
			{
				infowindow.close();
				marker.setIcon(icon1);
			}
		})(marker));
	}
}

initialize();