Google Maps Markers
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.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></script>After the connection, we have to initialize the maps. Google Maps API lets us 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.
<!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 overlay.One of those is Marker. We can create a marker like this way.
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 function too. If you will console the object or will see the prototypes, you understand that google gives us a very comfortable thing.
Google Maps Marker Events
Now let us talk a little about marker events. Google has some events for markers, polygon, polyline, etc. The events are click, center changed, hover etc.
Now let's 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>
0 Comments
CAN FEEDBACK
Emoji