在Google Maps 上點選標籤後顯示說明
阿新 • • 發佈：2021-12-23
<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 mapvar 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