mgn-gmaps v0.0.0

mgn-gmaps

Implement Google Maps API. You can get Google Maps API key from here.

• Target browser : IE11+

Install

npm i mgn-gmaps -S

Or Download raw data

↓ download "mgn-gmaps.js"

Import

import mgnGmaps from 'mgn-gmaps';

Prepare an element with latitude, longitude, zoom level initially displayed in data attribute.

<div class="[className]" data-lat="[緯度]" data-lng="[経度]" data-zoom="[ズームレベル]"></div>

Constructor

new mgnGmaps( element [, option] )

Method

Demo

https://frontend-isobar-jp.github.io/mgn-gmaps/

import mgnGmaps from './mgn-gmaps';

let gmaps = new mgnGmaps(
    ".j-maps",
    {
        scrollwheel: true,
        zoom: {
            default: 17,
            min: 3,
            max: 18,
        },
        pin: {
            icon: "./images/pin.svg",
            width: 36,
            height: 50,
            animation: 'BOUNCE'
        },
        responsive: {
            breakpoint: 640,
            zoom: {
                default: 15,
                min: 5,
                max: 18,
            },
            pin: {
                width: 18,
                height: 25
            }
        },
        styles: {
            pattern: "mono"
        },
        mapTypeControl: true, //マップタイプコントロールの有無を指定できます。 true or false デフォルトはfalse
        mapTypeControlOptions: {
            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP,
                google.maps.MapTypeId.HYBRID
            ],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }
);

gmaps.CreateEnd = function(){
    console.log("CreateEnd");
};