Today, it is common to use google maps to locate the places. There are mobile applications used in mobiles. On websites, the places are located on google maps. Those google maps are made using Google Maps API provided by Google. Here, we will see how to make a simple google map for a particular location using HTML, javascript and Google Maps API.
Here, the HTML code goes below.
Important Points:
Here, the HTML code goes below.
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type = "text/javascript">
var infoWindow = new google.maps.InfoWindow;
function load() {
var map = new google.maps.Map(document.getElementById("googlemap"), {
center: new google.maps.LatLng(37.40557, -122.07747),
zoom: 13,
mapTypeId: "roadmap"
});
var point = new google.maps.LatLng(37.40557, -122.07747);
var html = "<b>Google Inc.</b> <br/>Mountain View, CA 94043";
var marker = new google.maps.Marker({
map: map,
position: point
});
bindInfoWindow(marker, map, infoWindow, html);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onload="load()">
<div align="center">
<table border="1" width="80%" height="80%">
<tr>
<td id="googlemap" width="80%" height="80%"></td>
</tr>
</table>
</div>
</body>
</html>
Important Points:
- Here, the location shown is the Google Inc. with postal code as 94043 and latitude and longitude as 37.40557 and -122.07747 respectively.
- You may customize the map using the tutorials on the developers Google Maps API at https://developers.google.com/maps.
No comments:
Post a Comment