Recent

HTML Example 1: Creating Google Map in HTML

Google Map in HTML using JavaScript, in this example you will know how to create a Map in HTML using Javascript.

To add Google Map, you will need Latitude and Longitude of a place for which you are going to create Map, for this purpose you can search your desired map on google and copy paste it's Latitude and Longitude in line
var myCenter = new google.maps.LatLng(Your Latitude and Longitude Here);

After that you have to change content to show in your Page by changing the following line
  var infowindow = new google.maps.InfoWindow({
    content: "Your content here"
  });


That's it, you have successfully added google Map in your website.

Google Map Code


<html>
<head>
</head>
<body>

<div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(33.7177217,73.0722664);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {center: myCenter, zoom: 17};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: "Pakistan Map"
  });
  infowindow.open(map,marker);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvp526HPgr-YDvdRtF5Bpt6YB4NSbgzYQ&callback=myMap"></script>
</body>
</html>

Output

No comments