How to Create a Map With Multiple Pins Using Google Maps API

Creating a map with multiple pins means using Google Maps API to place markers at different locations on a single map

You can display multiple pins on a web page by writing code that connects to Google Maps, defines each location with latitude and longitude coordinates, and tells the map where to draw a marker at each spot. The simplest approach uses Google Maps JavaScript API, which handles the map display and marker placement for you. You write a few lines of code, provide the coordinates, and the map renders in your browser.

This is different from embedding a static map image — your map is interactive, meaning users can zoom, pan, and click on pins to see information. The process involves three main steps: setting up your Google Maps API key, writing HTML to create a container for the map, and writing JavaScript code that creates the map object and adds markers to it.

Key Takeaways

You need a Google Maps API key from the Google Cloud Console before your map will display, and you must enable the Maps JavaScript API service for that key.
Your HTML file needs a div element with an ID where the map will appear, and a script tag that loads the Google Maps library with your API key.
JavaScript code creates a map object centered on specific coordinates, then loops through an array of locations and adds a marker at each one.
Each marker can display a popup window (called an InfoWindow) when clicked, showing details about that location.
You can customize marker appearance, colors, and behavior by passing options to the marker creation code.

Getting your Google Maps API key

Visit the Google Cloud Console at console.cloud.google.com and sign in with a Google account. Create a new project by clicking the project dropdown at the top and selecting "New Project". Give it a name like "My Map Project" and click Create.

Once the project loads, search for "Maps JavaScript API" in the search bar at the top. Click on it and press the Enable button. Then go to the Credentials section in the left menu, click "Create Credentials", and select "API Key". Google will generate a long string of characters — this is your API key. Copy it and keep it somewhere safe; you will paste it into your code later.

Setting up your HTML file

Create a new HTML file and add a div element where your map will appear. Give it an ID so your JavaScript code can find it. Here is the basic structure:

<!DOCTYPE html> <html> <head> <title>My Map</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <script src="map.js"></script> </body> </html>

Replace YOUR_API_KEY with the actual key you copied from Google Cloud Console. The style section sets the map height and width — 400 pixels tall and full width of the page. The first script tag loads Google Maps from Google's servers. The second script tag points to a separate JavaScript file called map.js where you will write the code that creates your map and adds pins.

Writing the JavaScript code to create the map and add markers

Create a new file called map.js in the same folder as your HTML file. Start by defining an array of locations, where each location is an object containing a name, latitude, longitude, and any other information you want to display:

const locations = [ { name: "Coffee Shop", lat: 40.7128, lng: -74.0060 }, { name: "Library", lat: 40.7580, lng: -73.9855 }, { name: "Park", lat: 40.7829, lng: -73.9654 } ];

The latitude and longitude values are decimal numbers representing a specific point on Earth. You can find these coordinates by searching for a location on Google Maps, right-clicking it, and copying the numbers that appear. Next, write a function that creates the map and adds markers:

function initMap() { const mapCenter = { lat: 40.7128, lng: -74.0060 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: mapCenter }); locations.forEach(function(location) { new google.maps.Marker({ position: { lat: location.lat, lng: location.lng }, map: map, title: location.name }); }); } initMap();

This code creates a map object centered on the first coordinate (New York City in this example), sets the zoom level to 12 (a city-level view), and then loops through each location in your array. For each location, it creates a marker at those coordinates and adds it to the map. The title property sets the text that appears when you hover over a marker.

Adding popup windows to markers

To show more information when someone clicks a marker, add an InfoWindow — a popup box that displays text. Modify your forEach loop to create an InfoWindow for each location:

locations.forEach(function(location) { const infoWindow = new google.maps.InfoWindow({ content: "<div><strong>" + location.name + "</strong></div>" }); const marker = new google.maps.Marker({ position: { lat: location.lat, lng: location.lng }, map: map, title: location.name }); marker.addListener("click", function() { infoWindow.open(map, marker); }); });

Now when a user clicks a marker, the InfoWindow opens and displays the location name in bold. You can add more HTML inside the content property to show addresses, phone numbers, or links. Only one InfoWindow displays at a time — clicking a new marker closes the previous one automatically.

Customizing marker appearance and behavior

By default, all markers are red. You can change their color, add custom images, or adjust other properties by passing additional options to the Marker constructor. To change a marker color, add the icon property:

new google.maps.Marker({ position: { lat: location.lat, lng: location.lng }, map: map, title: location.name, icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" });

Google provides built-in marker colors: red-dot.png, blue-dot.png, yellow-dot.png, and green-dot.png. Replace the URL to use a different color. You can also upload your own image file and point to it instead. If you want different markers for different location types, add a category property to each location object and use an if statement to choose the icon based on that category.

Another useful customization is clustering — grouping nearby markers together when the map is zoomed out. This requires the MarkerClusterer library, which you load as a separate script. When users zoom in, the clusters break apart into individual markers, keeping the map readable at any zoom level.

Testing your map in the browser

Save both your HTML and JavaScript files in the same folder. Open the HTML file in a web browser by double-clicking it or dragging it into a browser window. Your map should appear with all the pins in place. Click on each marker to verify the popup windows display correctly. If the map does not appear, check the browser console for errors by pressing F12, clicking the Console tab, and looking for red error messages.

Common issues include a missing or invalid API key, forgetting to enable the Maps JavaScript API in Google Cloud Console, or typos in the div ID. If you see a message about authentication, go back to Google Cloud Console and verify your API key is correct. If you see a blank map, check that your coordinates are valid decimal numbers and that your zoom level is reasonable (zoom 1 shows the whole world, zoom 20 shows street level).

Frequently Asked Questions

Can I use a different mapping service instead of Google Maps?

Yes. Leaflet is a free, open-source library that works similarly to Google Maps API and does not require an API key. Mapbox is another option that offers more customization. The basic structure is the same — you create a map object, define locations, and add markers — but the syntax differs slightly for each library.

What if I have hundreds of markers on my map?

With many markers, your map becomes slow and cluttered. Use marker clustering to group nearby pins together, or filter the markers based on what the user searches for. You can also load markers from a database or CSV file instead of hardcoding them in your JavaScript, which makes updates easier.

How do I center the map on all markers automatically?

Use the LatLngBounds object to calculate the smallest rectangle that contains all your markers, then fit the map to that rectangle. Loop through all locations, add each to the bounds, then call map.fitBounds(bounds). This zooms the map to show all pins without you having to manually set the center and zoom level.

Can markers show different information for different users?

Yes. Instead of hardcoding locations in your JavaScript file, fetch them from a server using fetch() or XMLHttpRequest. The server can return different locations based on the logged-in user, their preferences, or other data. The marker creation code stays the same — it just works with data that comes from the server instead of from a local array.

Do I need to pay to use Google Maps API?

Google Maps API is free up to a certain number of map loads and marker interactions per month. If your map gets heavy traffic, you may incur charges. Check the Google Cloud Console billing section to set up billing alerts and see your current usage. For most small projects and learning purposes, you will stay within the free tier.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.