Is there a way to add an id to the div that is created when you add a marker to a google map?_问答_开发者

Is there a way to add an id to the div that is created when you add a marker to a google map?

开发者 https://www.devze.com 2023-02-07 20:26 出处：网络

相关专题：google-maps

The question is pretty self-explanatory. When a marker 开发者_StackOverflowis added to a google map, in the DOM it looks like it is actually a div wrapped around the marker image. It would make it a lot easier for me if those div's could be uniquely identified, e.g. I could grab individual markers on the map with getElementById() or similar. I'm using google maps v3.

Thanks.

Yes there is - you can create a custom Overlay class to include custom markup. Fortunately someone already had that idea and did it. Check out RichMarker and StyledMarker in Google Map Utility Libraries (at the bottom of the page) both allow you to put custom markup/css classes in marker markup.

If you just want to attach tooltips to the marker, you could also simply attach a custom property to the marker at creation (such as tooltip text or something) and add a mouseover event handler to read that property and do something with it.

Example:

    <html> 
    <head> 

    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Markers</title> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    var map;
    //your tooltips
    msg = ['Yeah Right', 'oompa oompa','I feel good']
    var marker;
    function initialize() {
      var chicago = new google.maps.LatLng(41.875696,-87.624207);
      var myOptions = {
        zoom: 11,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

    marker = new google.maps.Marker({
    map:map,
    position: chicago,
    title: "<h2>Sample Tooltip</h2>", //title can also be used for custom tooltips
    myCustomIndex:2 //storing index of a tooltip
    })


    //if you have multiple markers pls read about event closures http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

//attach an event to the marker
     google.maps.event.addListener(marker, 'mouseover', function() {
        //you could also use the title property of the marker to hold the text of the tooltop
        showFakeTooltip(marker.title)
        //or you could show it by accessing a custom property
        showTooltip(marker.myCustomIndex);
      });
    }

    function showFakeTooltip(title) {
    $(".fakeTooltip").html(title);
    }

    function showTooltip(index) {
    alert(msg[index])
    }




    </script> 
    </head> 
    <body onload="initialize()"> 

      <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
    <div class="fakeTooltip"></div>
    </body> 
    </html>