external link to google map marker

问题

I'm trying to make an external link that pulls up the info bubble of a marker and centers it. I wanted to do it by referencing a div ID that I called clickaway, this is what I set up but can't seem to get it working:

<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?
 title=Uluru&oldid=297882194">'+
        'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });


    var name = '#clickaway';


    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    google.maps.event.addListener(name, 'click', function() {
      infowindow.open(map,marker);
    });


  }


  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

回答1:

I think that you want to use addDomListener instead of addListener, since, as it's name says, can listen to the events for an object in the DOM. Check this sample made from your code, note that the CSS selector in your name variable is gone.

回答2:

It doesn't work that way, the marker is a javascript object, it can't be referenced with an HTML id. If you make the marker global, you can reference it in an HTML onclick function.

onclick="google.maps.event.trigger(marker, 'click');"

Another example with a clickable sidebar

来源：https://stackoverflow.com/questions/12946012/external-link-to-google-map-marker

标签

google-maps-api-3

google-maps-markers