Google Maps Markers
Google Maps Markers （Google地图标记）
Intro
Google Maps is a great product, which gives as many actions to do. In this chapter, we will talk about Google Maps Markers. Will know how to prepare, how to create, move, etc. As you know, if we want to use Google APIs, we have to connect a script in our html file. So for Google Maps, we have to connect the following script. （Google地图是一个很棒的产品，它提供了尽可能多的操作。在本章中，我们将讨论Google地图标记。将知道如何准备、如何创建、移动等。如您所知，如果我们想使用Google API ，我们必须在html文件中连接脚本。因此，对于Google地图，我们必须连接以下脚本。）
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></script>
After connection, we have to initialize the maps.Google Maps Api lets us to initialize the map very easily.In general we create a map on div or canvas.Remember, that before initializing, your html tag must contain geometric properties.Specially width and height.Lets see how we’re going to do that. （连接后，我们必须初始化地图。Google Maps Api允许我们非常轻松地初始化地图。一般来说，我们在div或canvas上创建地图。请记住，在初始化之前， html标记必须包含几何属性。特别是宽度和高度。让我们看看如何做到这一点。）
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:300px;"></div>
</body>
</html>
Google Maps Markers
So we sow how to initialize a Google Maps, now let’s talk a little about Google Maps Markers. As you know, Google has a kind of overlays.One of that is Marker.We can create a marker like by this way. （因此，我们将介绍如何初始化Google地图，现在让我们来谈谈Google地图标记。如您所知， Google有一种叠加层。其中之一是Marker。我们可以通过这种方式创建标记。）
var Marker = new google.maps.Marker({
position: markerCenter,
});
Marker.setMap(map);
But Google lets us have a marker with animation. Here is an example of how we can create a marker and set animation on it. （但谷歌让我们有一个带有动画的标记。以下是我们如何创建标记并在其上设置动画的示例。）
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></script>
<script>
var markerCenter = new google.maps.LatLng(20.2547,44.2658);
var marker = null;
function initialize() {
var mapProp = {
center: markerCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({
position: markerCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:300px;"></div>
</body>
</html>
If you want to use your custom icon, you can do that like （如果您想使用自定义图标，可以像）
var Marker = new google.maps.Marker({
position: markerCenter,
icon: iconPath
});
So when we decide to move the marker, we can do it with a special function. In general, google objects have some functionality inside the prototype. Marker has that functions too. If you will console the object or will see the prototypes, you understand that google gives us a very comfortable thing. （因此，当我们决定移动标记时，我们可以使用特殊函数来完成。一般来说， Google对象在原型中具有一些功能。标记也具有这些功能。如果您将控制物体或看到原型，您就会明白Google给了我们一个非常舒适的东西。）
Google Maps Marker Events
Now lets talk a little about marker’s events.Google has some events for markers, polygon, polyline etc.The events are click, center changed, hover etc. （现在让我们来谈谈标记的事件。Google有一些用于标记、多边形、折线等的事件。事件包括单击、中心更改、悬停等。）
Now lets see a little example about how to use click event on google maps marker. （现在让我们看一个关于如何在谷歌地图标记上使用点击事件的例子。）
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></script>
<script>
var markerCenter = new google.maps.LatLng(20.2547,44.2658);
var marker = null;
function initialize() {
var mapProp = {
center: markerCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({
position: markerCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
google.maps.event.addListener(marker,'click',function() {
alert("You clicked on the marker");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:300px;"></div>
</body>
</html>