Google Maps Markers in JavaScript

Markers in Google Maps are used to pinpoint specific locations on a map. A marker is typically represented as a small icon or symbol placed on the map at a specific geographic location, and it's often used to display information like locations, points of interest, or other data.

Here's a guide to adding and customizing markers in Google Maps using JavaScript.

Steps to Implement Google Maps Markers

1. Obtain an API Key

Before you start, ensure you have a Google Maps API key. You can get this from the Google Cloud Console after enabling the Maps JavaScript API.

2. Include Google Maps JavaScript API

Include the Google Maps JavaScript API in your HTML file by adding the following script tag to load the Google Maps script. Be sure to replace YOUR_API_KEY with your actual API key.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

The callback=initMap will call the initMap() function once the API is loaded.

3. HTML Structure

Create a simple HTML page to contain the Google Map:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Maps Markers Example</title>
  <style>
    /* Set the height of the map */
    #map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>Google Maps Markers</h1>
  <div id="map"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script src="app.js"></script>
</body>
</html>

4. JavaScript to Initialize Google Map and Add Markers

In your app.js file, create a function called initMap() to initialize the map and add markers.

function initMap() {
  // Set up the map with a center and zoom level
  const mapOptions = {
    center: { lat: 37.7749, lng: -122.4194 }, // Coordinates for San Francisco
    zoom: 12,
  };

  // Create a new map object and pass it to the HTML element with the id "map"
  const map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Marker 1: Create a marker at a specific location
  const marker1 = new google.maps.Marker({
    position: { lat: 37.7749, lng: -122.4194 }, // San Francisco
    map: map,
    title: 'San Francisco',
  });

  // Marker 2: Another marker at a different location
  const marker2 = new google.maps.Marker({
    position: { lat: 37.8044, lng: -122.2711 }, // Oakland
    map: map,
    title: 'Oakland',
  });
  
  // Marker 3: Customize the marker icon
  const marker3 = new google.maps.Marker({
    position: { lat: 37.6879, lng: -122.4702 }, // Daly City
    map: map,
    title: 'Daly City',
    icon: {
      url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png', // Custom icon
      size: new google.maps.Size(32, 32),
      scaledSize: new google.maps.Size(32, 32),
    },
  });
  
  // Optional: Add info windows to markers
  const infoWindow1 = new google.maps.InfoWindow({
    content: '<h3>San Francisco</h3><p>San Francisco is a major city in California.</p>',
  });
  marker1.addListener('click', () => {
    infoWindow1.open(map, marker1);
  });
  
  const infoWindow2 = new google.maps.InfoWindow({
    content: '<h3>Oakland</h3><p>Oakland is located across the bay from San Francisco.</p>',
  });
  marker2.addListener('click', () => {
    infoWindow2.open(map, marker2);
  });

  const infoWindow3 = new google.maps.InfoWindow({
    content: '<h3>Daly City</h3><p>Daly City is known for its foggy weather.</p>',
  });
  marker3.addListener('click', () => {
    infoWindow3.open(map, marker3);
  });
}

Explanation of the Code:

Initializing the Map:
- The google.maps.Map constructor creates a new map and binds it to the <div> with id="map".
- The center specifies the initial coordinates where the map should be centered (San Francisco in this case).
- The zoom defines the zoom level (12 in this case).
Adding Markers:
- Markers are created using google.maps.Marker(), which accepts an object with options like position (latitude and longitude), map (which map to add the marker to), and title (a label that shows when you hover over the marker).
- For Marker 3, a custom icon is used by specifying the icon option with the URL of the image.
Adding Info Windows:
- An InfoWindow is a popup that appears when a user clicks a marker.
- The addListener method listens for click events on the marker and opens the corresponding InfoWindow.

Customizing Markers

Custom Icons: You can customize the appearance of markers by providing an image URL for the icon property.

icon: {
  url: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png', // Custom icon URL
  size: new google.maps.Size(32, 32),  // Custom size
  scaledSize: new google.maps.Size(32, 32), // Scaled size for retina displays
},

Animation: You can add animations to markers, such as google.maps.Animation.BOUNCE or google.maps.Animation.DROP.

const marker = new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 },
  map: map,
  animation: google.maps.Animation.DROP, // Marker drops with animation
});

Handling Marker Click Events

You can add event listeners to markers to perform specific actions when a user clicks on a marker. For example, you could open an info window, change the marker's icon, or trigger any other JavaScript function.

marker.addListener('click', function() {
  alert('Marker clicked!');
});

Dynamic Markers

You can also create markers dynamically, based on data or user input. For example, if you have an array of locations, you could loop through the array and place a marker for each location:

const locations = [
  { lat: 37.7749, lng: -122.4194, title: 'San Francisco' },
  { lat: 37.8044, lng: -122.2711, title: 'Oakland' },
  { lat: 37.6879, lng: -122.4702, title: 'Daly City' }
];

locations.forEach(location => {
  new google.maps.Marker({
    position: location,
    map: map,
    title: location.title,
  });
});

Conclusion

Using markers in Google Maps with JavaScript is a powerful way to display locations and points of interest on a map. You can easily add, customize, and interact with markers, including adding event listeners and info windows. Whether you're showing a few locations or thousands of dynamic locations, markers are a core feature of the Google Maps API.

Souy Soeng

Google Maps Markers in JavaScript