search

Home >Web Front-end >JS Tutorial >How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-20 17:12:10808browse

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Multiple Marker Display in Google Maps JS API v3

Introduction

Displaying multiple markers on a Google Maps poses no significant challenge; however, several tutorials may seem overly complex for beginners. This article presents a simplified approach to plotting markers and displaying an info window upon clicking.

Approach

1. Obtain Marker Data:

Start by retrieving the marker data from an array, as illustrated in Google's sample:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

2. Initialize the Map:

Instantiate a new Google Map within a div element, providing options such as zoom, center, and map type.

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

3. Add Markers and Info Windows:

Loop through the locations array and create a marker for each location. When the marker is clicked, display an info window with the location's name.

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
 
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Example Code

The following complete code snippet demonstrates the implementation:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head>
<body>
  <div>

Additional Considerations

  • The provided example uses a fixed API key; remember to replace it with your own.
  • Closure magic is employed to ensure the correct location data is passed to the info window.
  • Refer to the Mozilla Dev Center article for further understanding of closures.

The above is the detailed content of How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?. For more information, please follow other related articles on the PHP Chinese website!

Array for map JS this location display windows zoom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How Can I Detect Inactive Browser Windows Using JavaScript?Next article：How Can I Detect Inactive Browser Windows Using JavaScript?

Related articles

See more