JS Javascript Google Map Open Street Map

Easily integrate maps in your projects

Idea Map: An Interactive JavaScript Library for Maps

The Idea Map is a powerful JavaScript library designed to simplify the integration of interactive maps into web applications. It provides developers with an easy-to-use interface for creating maps, markers, and defining custom interactions, making it an ideal tool for a wide range of mapping applications.

To get started, explore the usage examples below to understand how to implement Idea Map in your projects.

Usage Examples

Minimum Code for a Simple Map

To create a simple map using Idea Map, import the necessary files and set up the map with minimal code.

import ideaMap from "./lib/ideaMap.js";

// Define map container and center position
var element = document.querySelector('.map-container');
var centerPosition = {lat: 28.3949, lng: 84.1240};

// Define marker details
var markerDetails = [
    {
        icon: "http://maps.google.com/mapfiles/ms/icons/blue.png",
        position: {lat: 28.26689, lng: 83.9685},
        info: '<h4>Test Marker 1</h4>',
    },
    {
        icon: "http://maps.google.com/mapfiles/ms/icons/green.png",
        position: {lat: 27.4368, lng: 85.0026},
        info: '<h4>Test Marker 2</h4>',
    },
    {
        icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
        position: {lat: 28.8368, lng: 83.0026},
        info: '<h4>Test Marker 3</h4>',
    }
];

// Configure map options
var mapOptions = {
    element: element,
    center: centerPosition,
    markerData: markerDetails,
};

// Create an Idea Map instance
new ideaMap(mapOptions);

The output will be a simple map as shown in the image below: simple-map.png

Full Features Implementation

For a more comprehensive map utilizing the full features of Idea Map, import the required files and define additional parameters for enhanced functionality.

import ideaMap from "./lib/ideaMap.js";

// Define map options with additional features
var mapOptions = {
    apiKey: "YOUR_API_KEY",
    element: document.querySelector('.map-container'),
    center: {lat: 28.3949, lng: 84.1240},
    zoom: 6,
    type: "google",
    infoWindowMarkup: "<h4>Test Marker</h4>",
    infoWindowEvents: {
        // Define event handling for info window
        show: {
            event: "mouseover",
            before: function (ideaMarker) {
                console.log(ideaMarker);
            },
            after: function (ideaMarker) {
                console.log(ideaMarker);
            }
        },
        hide: {
            event: "mouseout",
            before: function (o) {
                console.log(o);
            },
            after: function (o) {
                console.log(o);
            }
        },
        events: [
            {
                event: "click",
                handler: function (o) {
                    alert(o.options.infoWindowContent);
                }
            }
        ]
    },
    markerData: [
        // Define marker details
        {
            icon: "http://maps.google.com/mapfiles/ms/icons/blue.png",
            position: {lat: 28.26689, lng: 83.9685},
            info: '<h4>Test Marker 2</h4>',
            events: [{
                event: 'click',
                handler: function (o) {
                    o.ideaInfoWindow.show();
                }
            },{
                event: 'mouseout',
                handler: function (o) {
                    o.ideaInfoWindow.hide();
                }
            }, {
                event: 'hover',
                handler: function (o) {
                    alert(o.options.info);
                }
            }]
        },
        {
            icon: "http://maps.google.com/mapfiles/ms/icons/green.png",
            position: {lat: 27.4368, lng: 85.0026},
            info: "<h4>Test Marker 2</h4>"
        },
        {
            icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
            position: {lat: 28.8368, lng: 83.0026},
            info: "<h4>Test Marker 3</h4>"
        }
    ]
};

// Create an Idea Map instance
new ideaMap(mapOptions);

Incorporate Idea Map into your project to create dynamic and interactive maps with ease. Feel free to customize the implementation according to your specific requirements.

Contribution Guidelines

We welcome contributions to enhance and extend the capabilities of this versatile library.

Installation

To get started with contributing, follow the installation steps:

yarn install

Running the Server

To run the server, use the following command:

yarn s

Join us in making Idea Map even better!

Feel free to customize the headings and content to align with your post’s goals and audience.