How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?-JS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-12-20 17:12:10

Original

802 people have browsed it

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]
];

Copy after login

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
});

Copy after login

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));
}

Copy after login

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>

Copy after login

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!