Skip to content

goong-io/goong-maps-component

Repository files navigation

GoongMapComponents

Using with CDN

<script src='https://cdn.jsdelivr.net/npm/@goong/[email protected]/dist/goong-maps-component.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/@goong/[email protected]/dist/goong-maps-component.min.css" rel="stylesheet" type="text/css"/>

Examples

Simple Map

Search Component

Multi Markers

Advance

React Component

Simple Map

Search Component

Multi Markers

Advance

Install

yarn add @goong/map-component

Or

npm install @goong/map-component

Component Examples

import * as GoongMap from "@goong/map-component";
import "@goong/map-component/dist/goong-maps-component.min.css";

function GoongComponentReact(props) {
  const markers = [
    {
      lngLat: [105.4, 21.3],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.1, 21.2],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.0, 21.0],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    }
  ];

  return (
    <GoongMap.Component
      accessToken="MAP LOAD API KEY",
      zoom={9}
      enabledSearch={false}
      markerIcon={null}
      markerSize={50}
      onSearch={(marker) => {
        console.log(marker);
      }}
      apiKey="SERVICE API KEY"
      leftPane="false"
      center={[105.0,21.0]},
      markers={markers},
      control={true}
    /> 
  );
}

Props

Key Type - Description
accessToken String - API Key for Mapload/Maptile
zoom Number - Default Zoom for Init Map
enabledSearch Boolean - Enabled Search/Autocomplete on the Map, This requirement with apiKey
apiKey String - API Key for call Resfult API
leftPane Boolean - Using for having some markers, and you need show list marker then click to going it
center LngLatArray - Default center for init Map
control Boolean - Show or hidden button zoomin/zoomout in Map
markers Array - List of marker for show in Map
markerIcon String - URL of icon png for use in Map
markerSize Number - Size by pixel for marker icon
onSearch Using only for React - handle poi when searching...

Events

ES5 handle events with method .on("eventName", function(obj){ //... })

Events Object
search MarkerObj

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published