<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