Shiva Bhusal
Shiva's Blog

Follow

Shiva's Blog

Follow
Easily integrate maps in your projects

Easily integrate maps in your projects

Shiva Bhusal's photo
Shiva Bhusal
·Aug 12, 2019·

2 min read

Play this article

Idea Map

https://github.com/ideabreed/idea-map

<%= current_page.data.summary %>

Usage

Minimum Code

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

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

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>',
    }
];

var mapOptions = {
    element: element,
    center: centerPosition,
    markerData: markerDetails,
};

new ideaMap(mapOptions);

Output

simple-map.png

Using full features

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

var apiKey = "AIzaSyCJBeRKLO65KJR25Zb3HCmPoT1vP4MLX6I";
var element = document.querySelector('.map-container');
var position = {lat: 28.3949, lng: 84.1240};
var zoom = 6;
var type = "google";
var infoWindowMarkup = "<h4>Test Marker</h4>";
var infoWindowEvents = {
    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)
            }
        }
    ]
};

var markerDetails = [
    {
        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: infoWindowMarkup
    },
    {
        icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
        position: {lat: 28.8368, lng: 83.0026},
        info: infoWindowMarkup
    }
];

var mapOptions = {
    element: element,
    center: position,
    zoom: zoom,
    type: type,
    apiKey: apiKey,
    markerData: markerDetails,
    infoWindowEvents: infoWindowEvents
};

new ideaMap(mapOptions);
  • Instantiate and object of ideaMap and provide the object created earlier as an argument
        map = new ideaMap (mapOptions);
    

Contribution Guidelines

You are welcome to contribute to this library.

Installation

yarn install

Run server

yarn s
 
Share this