TheSalarKhan/custom_markers.js

## custom_markers.js
<!DOCTYPE html>
<html>
    <head>
        <script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>

        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

    </head>
    <body>

        <div id="map-canvas" style='height:440px;width:700px;'></div>

        <script>

            // Declare map options here
            var mapOptions = {
                center: new google.maps.LatLng(37.7831,-122.4039),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            // Initiate the map.
            var theMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // URL for the marker icon, its preffered that the icon is
            // on the somain as this script.
            var MAP_ICON_URl = './man_marker.png';

            /**
            *   Description: This function will place a man marker on the map.
            *   @param theMap: The map object.
            *   @param lat,lng: Position to add the marker at.
            *   @param name: Name to display in the info window.
            *   @param imageUrl: Url of the image to display.
            **/
            function placeMarker(theMap,lat,lng,name,imageUrl) {

                // Create content to display in the info window.
                var contentString =
                    "<div><h4 class='info-name'>"+name+"</h4><img src='"+imageUrl+"' border='0' align='middle'></div>";

                // crate an info window with the content defined above.
                var infoWindow = new google.maps.InfoWindow({
                    content: '<div id="iw_content">' + contentString + '</div>',
                    pixelOffset: new google.maps.Size(40,15)
                });

                // create a marker, at the requested location
                var marker = new google.maps.Marker({
                    map: theMap,
                    position: new google.maps.LatLng(lat,lng),
                    icon: MAP_ICON_URl
                });


                setTimeoutConst = null;
                // Open info window upon mouse hover on the marker.
                marker.addListener('mouseover',function() {


                    setTimeoutConst = setTimeout(function(){
                        //do something
                        infoWindow.open(theMap, marker);
                     }, 500);


                });

                marker.addListener('mouseout',function() {
                    if(setTimeoutConst != null) {
                        clearTimeout(setTimeoutConst);
                    }

                    infoWindow.close();
                });


                // When the info window is ready, make it to look like we want it.
                google.maps.event.addListener(infoWindow, 'domready', function() {
                    // hide all the close button.
                    var closeButton = $('.gm-style-iw').next();
                    closeButton.hide();

                    // center the content inside the info window.
                    var iwOuter = $('.gm-style-iw');
                    iwOuter.css({'text-align':'center'});


                    // remove the margin between the text and the image in the content.
                    // Also outline the name with white so that it is reasable.
                    $(".info-name").css({'margin-top' : '0px'});
                    $(".info-name").css({'margin-bottom' : '0px'});
                    $('.info-name').css({
                        'text-shadow':
                           '-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff'
                    });


                    // Hide the info window tail and its shadow.
                    var iwBackground = iwOuter.prev();
                    iwBackground.children(':nth-child(1)').hide();
                    iwBackground.children(':nth-child(3)').hide();
                    iwBackground.hide();

                    //$('.gm-style-iw').parent().css({'top':'-305px'});
                });

            }


            placeMarker(theMap,37.8831,-122.4039,'Some Name','http://placekitten.com/90/90');

            placeMarker(theMap,37.7831,-122.4039,'Some other name','http://placekitten.com/90/90');


        </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>

	<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

	</head>
	<body>

	<div id="map-canvas" style='height:440px;width:700px;'></div>

	<script>

	// Declare map options here
	var mapOptions = {
	center: new google.maps.LatLng(37.7831,-122.4039),
	zoom: 12,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	// Initiate the map.
	var theMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	// URL for the marker icon, its preffered that the icon is
	// on the somain as this script.
	var MAP_ICON_URl = './man_marker.png';

	/**
	* Description: This function will place a man marker on the map.
	* @param theMap: The map object.
	* @param lat,lng: Position to add the marker at.
	* @param name: Name to display in the info window.
	* @param imageUrl: Url of the image to display.
	**/
	function placeMarker(theMap,lat,lng,name,imageUrl) {

	// Create content to display in the info window.
	var contentString =
	"<div><h4 class='info-name'>"+name+"</h4><img src='"+imageUrl+"' border='0' align='middle'></div>";

	// crate an info window with the content defined above.
	var infoWindow = new google.maps.InfoWindow({
	content: '<div id="iw_content">' + contentString + '</div>',
	pixelOffset: new google.maps.Size(40,15)
	});

	// create a marker, at the requested location
	var marker = new google.maps.Marker({
	map: theMap,
	position: new google.maps.LatLng(lat,lng),
	icon: MAP_ICON_URl
	});


	setTimeoutConst = null;
	// Open info window upon mouse hover on the marker.
	marker.addListener('mouseover',function() {


	setTimeoutConst = setTimeout(function(){
	//do something
	infoWindow.open(theMap, marker);
	}, 500);


	});

	marker.addListener('mouseout',function() {
	if(setTimeoutConst != null) {
	clearTimeout(setTimeoutConst);
	}

	infoWindow.close();
	});


	// When the info window is ready, make it to look like we want it.
	google.maps.event.addListener(infoWindow, 'domready', function() {
	// hide all the close button.
	var closeButton = $('.gm-style-iw').next();
	closeButton.hide();

	// center the content inside the info window.
	var iwOuter = $('.gm-style-iw');
	iwOuter.css({'text-align':'center'});


	// remove the margin between the text and the image in the content.
	// Also outline the name with white so that it is reasable.
	$(".info-name").css({'margin-top' : '0px'});
	$(".info-name").css({'margin-bottom' : '0px'});
	$('.info-name').css({
	'text-shadow':
	'-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff'
	});


	// Hide the info window tail and its shadow.
	var iwBackground = iwOuter.prev();
	iwBackground.children(':nth-child(1)').hide();
	iwBackground.children(':nth-child(3)').hide();
	iwBackground.hide();

	//$('.gm-style-iw').parent().css({'top':'-305px'});
	});

	}


	placeMarker(theMap,37.8831,-122.4039,'Some Name','http://placekitten.com/90/90');

	placeMarker(theMap,37.7831,-122.4039,'Some other name','http://placekitten.com/90/90');



	</script>

	</body>
	</html>