The RichMarker is a plugin for Google Maps ready to be used on mobile and desktop devices. It supports HTML CSS JS Markers and Info Windows. Info Windows with IntelliSense builds to be opened on the appropriate aria available on the Map and are sticky on the Map. RichMarker and Info Windows have various events handlers, pre-built default styles, options, and features. k-means clustering is in progress and will be available soon.
- Five default Markers and Three Info Windows styles.
- HTML Marker and HTML Info Windows.
- Animations support.
- Sticky Info Windows on the Map.
- IntelliSense builds for Info Windows.
- Info Windows with Sliders.
- Pure Javascript (no jQuery).
- Touch Support.
- Javascript options.
- Custom Callbacks and Event Handlers.
- Well documented.
- k-means clustering (in progress).
For Commonjs & ESModules:
// in commonjs & ESModules
import RichMap from "./RichMap.js";
// or
// in commonjs
const RichMap = require("./RichMap.js");In Plain Javascript:
<!-- in html file -->
<head>
...
<script src="./RichMap.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
// code
</script>
</body><!-- in html file -->
<head>
...
<style>
.google-maps {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="google-maps"></div>
...
...
<script>
// script function
function getScriptTag(src) {
const script = document.createElement('script');
script.setAttribute("type", "module");
script.src = src;
return script;
}
// intialize the map
function initMap() {
const script = getScriptTag("./src/index.js");
document.head.appendChild(script);
};
window.initMap = initMap;
</script>
<!-- Load the Google Maps Library Now. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=(your-key)&callback=initMap&libraries=&v=weekly"
defer="defer">
</script>
</body>In (index.js) file:
// get the map div
const mapDiv = document.getElementById("map");
// initalize the map in the div
const initMap = () => {
const myLatLng = { lat: 8.016, lng: 133.153 };
const map = new google.maps.Map(mapDiv, {
zoom: 3,
center: myLatLng,
disableDefaultUI: true,
});
window.map = map;
};
// call the initMap function
initMap();
// initalize the rich map plugin
const richMap = new RichMap({
map
});
// add html marker
const richMarker = richMap.addMarker({
domElement: richMap.getMarker("style-1"),
LatLng: { lat: -25.363, lng: 131.044 },
position: "bottomCenter"
});
// add html info window
const richInfoWindow = richMarker.addInfoWindow({
domElement: richMap.getInfoWindow("style-1"),
offset: "10px"
});
// Event Listener for the richMarker
richMarker.addEventListener("click", e => {
//console.log(e);
});
richMarker.addEventListener("mouseenter", e => {
//console.log(e);
});
richMarker.addEventListener("mouseleave", e => {
//console.log(e);
});
// Event Listener for the richInfoWindow
richInfoWindow.addEventListener("click", e => {
//console.log(e);
});
richInfoWindow.addEventListener("mouseenter", e => {
//console.log(e);
});
richInfoWindow.addEventListener("mouseleave", e => {
//console.log(e);
});Example:
const richMap = new RichMap({
map // google maps class
});Syntax:
addMarker({
domElement: HTMLElement,
LatLng: LatLng, // google maps class
position: string
}) : RichMarkerExample:
const richMarker = richMap.addMarker({
domElement: richMap.getMarker("style-1"),
LatLng: { lat: -25.363, lng: 131.044 },
position: "bottomCenter"
});- HTMLElement
- LatLng (google maps class)
- topLeft
- topCenter
- topRight
- rightCenter
- bottomRight
- bottomCenter
- bottomLeft
- leftCenter
- center
Syntax:
getMarker(style: string): HTMLElementExample:
const htmlMarkerStyle1 = richMap.getMarker("style-1");- style-1
- style-2
- style-3
- style-4
- style-5
Syntax:
getInfoWindow(style: string): HTMLElementExample:
const htmlInfoWindowStyle1 = richMap.getInfoWindow("style-1");- style-1
- style-2
- style-3
Example:
const richMarker = richMap.addMarker({
domElement: HTMLElement,
LatLng: LatLng, // google maps class
position: string
}) : RichMarkerSyntax:
hide() : voidExample:
richMarker.hide();Syntax:
show() : voidExample:
richMarker.show();Syntax:
getZIndex() : numberExample:
const markerZIndex = richMarker.getZIndex();Syntax:
addInfoWindow({
domElement: HTMLElement,
offset: string
}) : voidExample:
richMarker.addInfoWindow({
domElement: richMap.getInfoWindow("style-1"),
offset: "10px"
});- HTMLElement
- CSS Value
Syntax:
hideInfoWindow() : voidExample:
richMarker.hideInfoWindow();Syntax:
showInfoWindow() : voidExample:
richMarker.showInfoWindow();Example:
const richInfoWindow = richMarker.addInfoWindow({
domElement: HTMLElement,
offset: string
});Syntax:
hide() : voidExample:
richInfoWindow.hide();Syntax:
show() : voidExample:
richInfoWindow.show();Example:
// Event Listener for the richMarker
richMarker.addEventListener("click", e => {
//console.log(e);
});
richMarker.addEventListener("mouseenter", e => {
//console.log(e);
});
richMarker.addEventListener("mouseleave", e => {
//console.log(e);
});
// Event Listener for the richInfoWindow
richInfoWindow.addEventListener("click", e => {
//console.log(e);
});
richInfoWindow.addEventListener("mouseenter", e => {
//console.log(e);
});
richInfoWindow.addEventListener("mouseleave", e => {
//console.log(e);
});
Salman Altaf (sllujaan44@gmail.com).
RichMarker
v1.0.0