Home > Web Front-end > JS Tutorial > How to Display Multiple Markers with InfoWindows using the Google Maps JS API v3?

How to Display Multiple Markers with InfoWindows using the Google Maps JS API v3?

Barbara Streisand
Release: 2024-12-20 15:45:10
Original
825 people have browsed it

How to Display Multiple Markers with InfoWindows using the Google Maps JS API v3?

Google Maps JS API v3 - Simple Multiple Marker Example

Creating a Map and Markers

To begin, create a new HTML file and include the Google Maps API script with your API key. Next, set up the Map object and provide it with the necessary parameters:

1

2

3

4

5

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

Creating an InfoWindow

Define an InfoWindow object, which displays the location name upon marker click:

1

var infowindow = new google.maps.InfoWindow();

Copy after login

Looping Through Location Data

Next, iterate through your data array and create a marker for each location, adding it to the map:

1

2

3

4

5

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

  });

Copy after login

Setting Click Events for InfoWindows

Finally, add an event listener to each marker that triggers the InfoWindow to open when clicked:

1

2

3

4

5

6

7

  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

Complete Code

The complete code looks like this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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]

];

 

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

});

 

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

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

Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template