- Virat Jetty

Map with multiple Marker

Map to display multiple locations with Markers.

Code to display map with multiple markers

<html>
<head>
	<script>
        function initMap() {
            const objMap = new google.maps.Map(document.getElementById("dvMap"), {
                zoom: 10,
                center: { lat: 38.9072, lng: -77.0369 },
            });

            const arrLocations = [
                [38.9171, -77.2222, "Tyson Mall", "TM", "The Tyson Mall"],
                [38.7818, -77.0147, "National Harbor", "NH", "The National Harbor"],
                [38.9847, -77.0947, "Bethesda", "B", "Bethesda City"],
                [38.8882, -77.0199, "Capitol Building", "C", "The Capitol"],
            ];

            for (let i = 0; i < arrLocations.length; i++) {
                const loc = arrLocations[i];

                SetMarker(objMap, loc[0], loc[1], loc[2], loc[3], loc[4]);
            }
        }

        function SetMarker(pMap, pLat, pLng, pTitle, pLabel, pContent) {
            const objMarker = new google.maps.Marker({
                map: pMap,
                position: { lat: pLat, lng: pLng },
                title: pTitle,
                label: pLabel,
            });

            const objInfowindow = new google.maps.InfoWindow({
                content: pContent,
            });

            objMarker.addListener("click", () => {
                objInfowindow.open({
                    anchor: objMarker,
                    pMap,
                });
            });
        }
	</script>
</head>
<body>
	<div id="dvMap" style="width:800px; height:600px; border:1px solid grey;"></div>	
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

Ginger CMS
the future of cms, a simple and intuitive content management system ...

ASP.NET MVC Application
best practices like Repository, LINQ, Dapper, Domain objects ...

CFTurbine
cf prototyping engine, generates boilerplate code and views ...

Search Engine LITE
create your own custom search engine for your web site ...

JRun monitor
monitors the memory footprint of JRun engine and auto-restarts a hung engine ...

Validation Library
complete validation library for your web forms ...