在Google Maps 上点击标签后显示说明

2021-12-23 20:06:13 阅读：180 来源： 互联网

标签：map Google maps 标签 var Maps google marker new

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>My first map</title>

<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />

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

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<style type="text/css">
    body {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: small;

background: #fff;

}

#map {

width: 100%;

height: 500px;

border: 1px solid #000;

}

.info {

width: 250px;

}

 


</style>

<body>

<h1>My first map</h1>

<div id="map"></div>


<script type="text/javascript">
(function() {

    window.onload = function() {

 



        // Creating an object literal containing the properties

        // you want to pass to the map

        var options = {

            zoom: 5,

            center: new google.maps.LatLng(35.504142300439554, 103.21494720510887),

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

 

        // Creating the map

        var map = new google.maps.Map(document.getElementById('map'), options);

 

        // Creating an array which will contain the coordinates

        // for New York, San Francisco and Seattle

        var places = [];

 

        // Adding a LatLng object for each city

        places.push(new google.maps.LatLng(37.775, -122.419));

       places.push(new google.maps.LatLng(47.620, -122.347));

        //Reminders for upgrading multiple marking points in the second iteration
         var markerArr = [
                { title: "CHINA：IDOBIO(XIAN)CO.,LTD.", point: "37.775, -122.419", address: "14-4, No. 5, Haibo Square, Xi'an, Shaanxi", tel: "+86-29-89131105" },
                { title: "KOREA：IDOBIO(KOREA)CO.,LTD.", point: "47.620, -122.347", address: "7 Deokpungbuk-ro 259 beon-gil,Hanam-si,Korea 12933", tel: "+82-10-9115 0589" },
          
                ];

 

        // Creating a variable that will hold the InfoWindow object

        var infowindow; 

        // Looping through the places array
        for (var i = 0; i < places.length; i++) { 

            // Adding the markers
            var marker = new google.maps.Marker({
                position: places[i],
                map: map,
                title: 'Place number ' + i
            });

 

            // Wrapping the event listener inside an anonymous function

            // that we immediately invoke and passes the variable i to.

            (function(i, marker) {

 

                // Creating the event listener. It now has access to the values of

                // i and marker as they were during its creation

                google.maps.event.addListener(marker, 'click', function() {

 

                    if (!infowindow) {

                        infowindow = new google.maps.InfoWindow();

                    }

 

                    // Setting the content of the InfoWindow

                    infowindow.setContent("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>Address：" + markerArr[i].address + "</br> Tel：" + markerArr[i].tel + "</br></p>");

 

                    // Tying the InfoWindow to the marker

                    infowindow.open(map, marker);

 

                });

 

            })(i, marker);

 

        }

 

    };

})();

</script>

</body>

</html>

37.775, -122.419

标签：map,Google,maps,标签,var,Maps,google,marker,new
来源： https://www.cnblogs.com/yuesha/p/15724962.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在Google Maps 上点击标签后显示说明