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

<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>
 

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

 

 

37.775, -122.419

上一篇:蓝桥杯2015初赛 - 加法变乘法 - 暴力


下一篇:SDN第六次上机实验