Adding Markers onClick in Google Map v3
Written by Saran on November 19, 2011, Updated December 29, 2015HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#google_map {width: 550px; height: 450px;margin-top:50px;margin-left:auto;margin-right:auto;}
</style>
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=GOOGLE-MAP-API-KEY&sensor=false">
</script>
<script type="text/javascript">
var mapCenter = new google.maps.LatLng(54.19265, 16.1779); //Google map Coordinates
var map
function initialize() //function initializes Google map
{
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 15, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
}
function addMyMarker() { //function that will add markers on button click
var marker = new google.maps.Marker({
position:mapCenter,
map: map,
draggable:true,
animation: google.maps.Animation.DROP,
title:"This a new marker!",
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="google_map" ></div><button id="drop" onClick="addMyMarker()">Drop Markers</button>
</body>
</html>Demo
map loading
