Adding Markers and Custom Icons on Google Maps in React.js

Google Maps is a powerful tool for displaying and interacting with geographic information in web applications. In this blog post, we will explore how to add markers with custom icons to a Google Map using React.js. Custom markers can help you make your maps more visually appealing and informative.

Prerequisites: Before we begin, make sure you have the following prerequisites in place:

1. A basic understanding of React.js and JavaScript.
2. Node.js and npm (Node Package Manager) installed on your development machine.
3. A Google Cloud Platform (GCP) account with billing enabled and the Maps JavaScript API enabled.

Let’s get started!

Step 1: Set Up a React.js Project If you don’t already have a React.js project, you can create one using Create React App or your preferred React.js project setup.

npx create-react-app custom-marker-map
cd custom-marker-map
npm start

Step 2: Create a Google Maps Component Next, let’s create a React component that will display the Google Map.

// src/components/GoogleMap.js

import React, { Component } from 'react';

class GoogleMap extends Component {
  componentDidMount() {
    // Load the Google Maps JavaScript API
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
    script.async = true;
    script.defer = true;
    script.onload = this.initMap;
    document.head.appendChild(script);
  }

  initMap() {
    // Initialize the map
    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.7749, lng: -122.4194 }, // Set your initial map center coordinates
      zoom: 12, // Set the initial zoom level
    });

    // Add markers to the map
    const marker = new window.google.maps.Marker({
      position: { lat: 37.7749, lng: -122.4194 }, // Set marker coordinates
      map: map,
      icon: 'path/to/custom-marker.png', // Path to your custom marker icon
      title: 'Custom Marker',
    });
  }

  render() {
    return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
  }
}

export default GoogleMap;

In this component, we load the Google Maps JavaScript API using a script tag and initialize the map with a specified center and zoom level. We then add a custom marker to the map using the google.maps.Marker class and provide the path to the custom marker icon.

Step 3: Display the Map Component Now, import and render the GoogleMap component in your main App.js file or any other desired location within your React app.

// src/App.js

import React from 'react';
import './App.css';
import GoogleMap from './components/GoogleMap';

function App() {
  return (
    <div className="App">
      <h1>Custom Marker Map</h1>
      <GoogleMap />
    </div>
  );
}

export default App;

Step 4: Customize the Marker Icon To use a custom icon for your marker, replace 'path/to/custom-marker.png' with the path to your custom marker icon image. You can use a PNG or SVG file for your marker.

Step 5: Run Your React App Start your React app by running:

npm start

You should now see a Google Map with a custom marker icon at the specified coordinates.

Conclusion: In this blog post, we’ve learned how to add markers with custom icons to a Google Map in a React.js application. Custom markers can help you personalize your maps and provide valuable information to your users. You can further enhance your map by adding interactivity and additional features, such as info windows, by exploring the Google Maps JavaScript API documentation. Happy mapping!

React Company provides access to a team of experienced React developers who are ready to answer your questions and help you solve any problems you may encounter.

For any inquiries or further assistance, please don’t hesitate to contact us.

For more details you can connect with bosc tech labs.