从Google Maps Custom Marker打开媒体

Question

So I'm working on a custom google maps tour type application and I'm wondering how to get media to popup when I click a link within a google maps marker. 因此，我正在开发一个自定义的Google Maps Tour类型应用程序，我想知道当我单击Google Maps标记内的链接时如何使媒体弹出。 Ideally this is what I would like to happen: 1. User clicks on marker and the normal white box comes up like on real Google Maps. 理想情况下，这就是我希望发生的情况：1.用户单击标记，然后像在真实的Google Maps上一样出现普通的白框。 2. Within that text box I would like to have a button that will launch media that I have stored on a SQL server somewhere. 2.在该文本框中，我想要一个按钮，该按钮将启动存储在SQL Server某处的媒体。 This media could be audio, pictures, or video. 该媒体可以是音频，图片或视频。

The code I have so far is below. 我到目前为止的代码如下。 If anyone could let me know how to do this, or point me in the right direction that would be awesome! 如果有人能让我知道如何做到这一点，或者为我指明正确的方向，那将非常棒！

Thanks 谢谢

<!doctype  html>

<html>
<head>
    <title>HuskyWalk Application Demo</title>
    <meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
        <style>
            html, body, #mapcanvas {
                margin: 0;
                padding: 0;
                height: 98%;
                }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
         <script>
  var map;
  var iteCoords = new google.maps.LatLng(41.806501, -72.252769);
  //var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude);
  //var mapCoords = new navigator.getCurrentPosition().coords;

  function initialize() {
    //var position = new navigator.geolocation.getCurrentLocation(showPosition);
    var mapOptions = {
      zoom: 18,
      center: iteCoords,
      mapTypeId: google.maps.MapTypeId.HYBRID
        };
    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
    google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);
    var marker = createMarker();  //creates marker
    }

    function watchStart() {
        if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
        } else {
        alert("Geolocation is not supported by this browser.");
        }
    }

    function createMarker() {
        var marker = new google.maps.Marker({
            position: iteCoords,
            map: map,
            title: 'ITEB',
            });         
        google.maps.event.addListener(marker, "click", onMarker_clicked);
        return marker;
    }

    function onMarker_clicked() {
        alert(this.get('id'));
        }

</script>
</head>
<body onload="initialize()">
    <div id="mapcanvas"></div>
    <div>
        <p>Maps provided by Google Maps</p>
        </div>
    </body>
</html>

I know there is going to need to be some stuff in the onMarker_Clicked() method most likely, I'm just not sure what. 我知道onMarker_Clicked（）方法中最可能需要一些东西，我只是不确定。

Answer 1

You'll want to use an InfoWindow and call its open() method from the click event handler. 您将要使用InfoWindow并从click事件处理程序中调用其open（）方法。

See also the section in the google maps developer guide https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows 另请参阅《谷歌地图开发人员指南》中的部分https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

从Google Maps Custom Marker打开媒体

问题描述

1 个解决方案

解决方案1
0 2012-11-22 01:05:04

从Google Maps Custom Marker打开媒体

问题描述

1 个解决方案

解决方案1 0 2012-11-22 01:05:04

解决方案1
0 2012-11-22 01:05:04