<!DOCTYPE html>
<html>
<head>
<title>Symbols</title>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(41.33036, 19.82466),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var goldStar = {
path: 'M 100 100 L 300 100 L 200 300 z',
// path:'M 100,100 L 300,100 L 200,300 z'
// path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
// path eshte i domosdoshem
// 'google.maps.SymbolPath' jane te paracaktuara :
// BACKWARD_CLOSED_ARROW, BACKWARD_OPEN_ARROW, CIRCLE,
//FORWARD_CLOSED_ARROW, FORWARD_OPEN_ARROW
// ose 'SVG path notation' M: moveto L:lineto z:closepath
fillColor: "yellow",
fillOpacity: 0.8,
scale: 0.7, //shkalla e figures
strokeColor: "gold",
strokeWeight: 9
};
var marker=new google.maps.Marker({
position: new google.maps.LatLng(41.33036, 19.82466),
icon: goldStar,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:700px;height:500px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Marker Animations</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var tirana = new google.maps.LatLng(41.33036, 19.82466);
var fshn = new google.maps.LatLng(41.33396, 19.81607);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: tirana
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: fshn
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 700px; height: 600px;">map div</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations Loop</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var berlin = new google.maps.LatLng(41.33036, 19.82466);
var pika = [
new google.maps.LatLng(41.33396, 19.81607),
new google.maps.LatLng(41.34396, 19.79607),
new google.maps.LatLng(41.31396, 19.83607),
new google.maps.LatLng(41.30396, 19.82607)
];
var markers = [];
var iterator = 0;
var map;
function initialize()
{
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
function drop() {
for (var i = 0; i < pika.length; i++) {
setTimeout(addMarker, i * 300);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: pika[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 700px; height: 600px;">map div</div>
<button id="drop" onclick="drop()">Drop Markers</button>
</body>
</html>