Question

71

JavaScript click event for any google maps markers?

rated 0 times [ 73] [ 2] / answers: 1 / hits: 16412 / 12 Years ago, tue, february 28, 2012, 12:00:00

I need to make something happen when any google maps marker is clicked on. Im using the demo from this link as a starting point:

http://gmap3.net/examples/tags.html

UPDATE - ive tried the following:

$.each(markers, function(i, marker){

  marker.click(function(){  

     alert('alert');

  });

});



$.each(markers, function(i, marker){

  $(marker).click(function(){  

     alert('alert');

  });

});

UPDATE Ive tried adding this middle section to existing code:

        $.each(markers, function(i, marker){

            marker.setMap( checked ? map : null);



           //added code begins

            $(marker).click(function(){ 

                 alert('dfd');

              });

           //added code ends



        });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

jaelynncherokeeg questions

1 NextJS load external image Amazon

Thu, May 27, 21, 00:00, 3 Years ago

1 Create an Array of Favorite fruits Object

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React Testing Library - Avoid getBy?

Thu, Nov 14, 19, 00:00, 5 Years ago

1 How do I POST data to a .NET Core Web API using the fetch() javascript method

Thu, Sep 26, 19, 00:00, 5 Years ago

1 Yarn Link All Packages/Workspaces

Wed, Sep 18, 19, 00:00, 5 Years ago

View All

answered 12 Years ago brookelynshaem · Accepted Answer

Note that the OP is asking about doing this using the GMAP3 library, which is a jQuery plugin library that adds an API layer on top of the Google Maps layer. it is absolutely correct to say that the Google API is to use google.maps.addListener, but I think that the OP wants something that's closer to the GMAP3 example using addMarkers, but listening to the click event. With that in mind, I modified the example from GMAP3 and changed the mouseenter event to the click event and got rid of the mouseleave event.

For those wanting to do further playing, I created a jsFddle of this example.

Here's the source:

<!DOCTYPE HTML>

<html>

<head>

    <style>

     #map {

      width: 400px;

      height: 400px;

  }

</style>

<script type=text/javascript src=http://maps.google.com/maps/api/js?sensor=false>  </script>

<script type=text/javascript src=http://gmap3.net/js/gmap3-4.1-min.js></script>

<script type=text/javascript>

    $(document).ready(function() {

        $('#map').gmap3({

            action: 'init',

            options: {

                center: [46.578498, 2.457275],

                zoom: 5

            }

        }, {

            action: 'addMarkers',

            markers: [

            {

                lat: 48.8620722,

                lng: 2.352047,

                data: 'Paris !'},

                {

                    lat: 46.59433,

                    lng: 0.342236,

                    data: 'Poitiers : great city !'},

                    {

                        lat: 42.704931,

                        lng: 2.894697,

                        data: 'Perpignan ! <br> GO USAP !'}

                        ],

                        marker: {

                            options: {

                                draggable: false

                            },

                            events: {

                                click: function(marker, event, data) {

                                    var map = $(this).gmap3('get'),

                                    infowindow = $(this).gmap3({

                                        action: 'get',

                                        name: 'infowindow'

                                    });

                                    if (infowindow) {

                                        infowindow.open(map, marker);

                                        infowindow.setContent(data);

                                    } else {

                                        $(this).gmap3({

                                            action: 'addinfowindow',

                                            anchor: marker,

                                            options: {

                                                content: data

                                            }

                                        });

                                    }

                                }

                            }

                        }

                    });

});

</script>

</head>

<body>

    <div id=map style=width: 400x; height: 400px></div>

</body>

</html>