Google Maps JS API v3 - Simple Multiple Marker Example

javascript

prompt-engineering

web-development

best-practices

byAlex Kataev·Sep 15, 2024

Let's create multiple markers on a Google Map with ease and grace. The following code snippet includes a simplified example:

// Define marker data
var markersData = [
  { title: 'Location 1', lat: 37.4232, lng: -122.0853 },
  { title: 'Location 2', lat: 37.4289, lng: -122.1697 },
  { title: 'Location 3', lat: 37.6153, lng: -122.3900 }
];

// Time to setup the map!
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: markersData[0].lat, lng: markersData[0].lng }
  });

  // Let's make markers for our favorite spots!
  markersData.forEach(function(location) {
    var marker = new google.maps.Marker({
      position: { lat: location.lat, lng: location.lng },
      title: location.title,
      map: map
    });

    // Oh, and don't forget info windows!
    marker.addListener('click', function() {
      var infoWindow = new google.maps.InfoWindow({ content: location.title });
      infoWindow.open(map, marker);
    });
  });
}

// Set the ball rolling!
initMap();

Our markers data declared in markersData will include title, lat, and lng. Furthermore, we initialize the map with a center and zoom level and use forEach to create and place each marker on the map. We also have clickable info windows for each marker - a cool feature for interactive maps!

Mastering markers

The power of closures

Closures can efficiently manage info windows for multiple markers. It's like magic, but better since you understand how it works:

markersData.forEach(function(location, index) {
  var marker = new google.maps.Marker({
    position: { lat: location.lat, lng: location.lng },
    // adding marker is like saying, "X marks the spot!"
    title: location.title,
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, index) {
    return function() {
      var infoWindow = new google.maps.InfoWindow({ content: location.title });
      infoWindow.open(map, marker);
      // You clicked and hence, you shall receive info!
    }
  })(marker, index));
});

Clustering markers: companionship at its best!

To manage copious amounts of markers, MarkerClusterer is your friend. It's like a shepherd for a crowd of markers:

var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'path/to/images' });

Remember, the secret lies in the management of maps overrun by markers; cluster similar ones to maintain a visually satisfying map.

More bells and whistles

Custom icons for diverse location types, dynamic data retrieval, the possibilities are endless! Let your creativity run wild and make your map truly unique.

Performance matters!

Always be wary of performance while plotting multiple markers. Judge your map with varying quantities (500, 1000, etc.) and keep a keen eye on the rendering slugfest.

Visualization

Imagine a virtual tour through a bustling town with several points of interest:

🏨: Hotel
🍔: Restaurant
🏦: Bank
🏖️: Beach

Let's give these places a home on our map using the ever-so-helpful Google Maps JS API:

const locations = [
  { lat: -31.563910, lng: 147.154312, title: '🏨' },
  { lat: -33.718234, lng: 150.363181, title: '🍔' },
  { lat: -34.727552, lng: 135.889092, title: '🏦' },
  { lat: -34.728618, lng: 137.228134, title: '🏖️' },
];

Every location is like a refreshing stop on our grand tour:

🗺️ Map: [🏨, 🍔, 🏦, 🏖️]
// It's like a sightseeing bus ride, but you're in control!

Turbocharge your map

Here are ways to put your map on steroids:

Randomize Lat/Lng in examples - makes all your markers feel special and unique.
Asynchronous loading for the Google Maps API script improves web performance.
Use of custom marker images to mark different categories of locations.

The following snippets load the Google Map asynchronously and introduce custom icons to our map:

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

function initMap() {
  var customIcon = 'path/to/your/custom/icon.png';

  markersData.forEach(function(location) {
    var marker = new google.maps.Marker({
      position: { lat: location.lat, lng: location.lng },
      // Because, why should humans have all the custom bling?
      icon: customIcon,
      title: location.title,
      map: map
    });
    // Rest of the marker logic...
  });
  // Continue with your map initialization process...
}