-
Notifications
You must be signed in to change notification settings - Fork 1
/
map_with_marker.html
54 lines (53 loc) · 1.68 KB
/
map_with_marker.html
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
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<title>Simple Map With Marker</title>
<!-- Style for map div -->
<style type="text/css">
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<!-- map div -->
<div id="map"></div>
<!-- Js for map -->
<script type="text/javascript">
function initMap() {
//--- set the latitude and longitude for map position ---//
var point = {lat : 23.754194, lng : 90.359391};
//--- set the center point of map and zoom ---//
var map = new google.maps.Map(document.getElementById("map"), {
center : point,
zoom : 17
});
//--- set the marker position and animation for this marker ---//
var marker = new google.maps.Marker({
position : point,
map : map,
animation : google.maps.Animation.BOUNCE
});
//--- write information for map marker ---//
var content = "<h2> Parallax Programmers </h2>"+
"<p> Address: 4/13 kaderabad housing </p>"+
"<p> Mohammodpur, Dhaka-1209 </p>"+
"<p> Cell : 880 1810-123456 </p>"+
"<p> Email : info@parallaxprogrammer.com </p>";
//--- set the content for infowindow ---//
var infowindow = new google.maps.InfoWindow({
content : content
});
//--- while click on marker show the infowindow ---//
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<!-- The async defer allow the browser to render the page when API load
-- The key is the google api key provided for you
-- The callback execute the initMap() function -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APP KEY&callback=initMap"></script>
</body>
</html>