SVECTOR Maps

SVECTOR API Key Management

Your Email

Password

How to Use Your API Key

To integrate SVECTOR Maps into your website, follow these steps:

1. Include the SVECTOR Maps API script in your HTML file:

<script src="https://maps.svector.co.in/svector-maps-api.js"></script>

2. Initialize the map with your API key:

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  SVECTOR.initMap('YOUR_API_KEY_HERE');
</script>

3. Replace 'YOUR_API_KEY_HERE' with the API key generated above.

Example Code

Here's a complete example of how to use SVECTOR Maps:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>SVECTOR Maps Example</title>

  <style>   </style>

  <!-- Add Firebase SDK scripts -->

  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>

  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>

</head>

<body>

  <h1>My Map</h1>

  <div id="map"></div>

  <script src="https://maps.svector.co.in/svector-maps-api.js"></script>

  <script>

    SVECTOR.initMap('YOUR_API_KEY_HERE');

</script>

</body>

</html>

React Code Snippet:

import React, { useEffect, useRef } from 'react';

// URL to the SVECTOR Maps API and Firebase scripts
const SVECTOR_MAPS_URL = 'https://api.svector.co.in/svector-maps-api.js';
const FIREBASE_APP_URL = 'https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js';
const FIREBASE_FIRESTORE_URL = 'https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js';

// Your API key
const API_KEY = 'YOUR_API_KEY';

const SVECTORMap = ({ containerId = 'map' }) => {
    const mapContainer = useRef(null);

    useEffect(() => {
        const loadScript = (src) => {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.async = true;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        };

        const initializeMap = async () => {
            try {
                // Load Firebase SDK scripts
                await Promise.all([
                    loadScript(FIREBASE_APP_URL),
                    loadScript(FIREBASE_FIRESTORE_URL)
                ]);

                // Load SVECTOR Maps API script
                await loadScript(SVECTOR_MAPS_URL);

                // Check if SVECTOR is loaded and initialize the map
                if (window.SVECTOR && typeof window.SVECTOR.initMap === 'function') {
                    window.SVECTOR.initMap(API_KEY, containerId);
                } else {
                    throw new Error('SVECTOR Maps script not loaded correctly.');
                }
            } catch (error) {
                console.error('Error initializing map:', error);
            }
        };

        // Initialize the map on component mount
        initializeMap();

        // Cleanup script on component unmount
        return () => {
            const scripts = [
                FIREBASE_APP_URL,
                FIREBASE_FIRESTORE_URL,
                SVECTOR_MAPS_URL
            ];

            scripts.forEach(src => {
                const script = document.querySelector(`script[src="${src}"]`);
                if (script) {
                    document.head.removeChild(script);
                }
            });
        };
    }, [containerId]);

    return <div id={containerId} style={{ width: '100%', height: '100%' }} />;
};

export default SVECTORMap;