Map with InfoWindow
Map to display location with Markers and InfoWindow.Code to display map with marker and infowindow (popup)
<html>
<head>
<script>
function initMap() {
const objMap = new google.maps.Map(document.getElementById("dvMap"), {
zoom: 10,
center: { lat: 38.9072, lng: -77.0369 },
});
//SetMarker(map, lat, lng, title, label, content);
SetMarker(objMap, 38.9072, -77.0369, "Washington, DC", "DC", "The World's Capital");
}
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 ...
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 ...