GOOGLE MAP IN WEBSITE USING HTML & JAVASCRIPT | ADVANCE

Share the post
Google_maps_using_html_javascript

HOW TO ADD GOOGLE MAP IN WEBSITE USING HTML

Today, we will see how to add a google map to the website using HTML & JavaScript? How to get Google API Key to show google maps? How to show google maps by using simple steps? How to show location pointer for particular latitude & longitude?

How to show google maps using HTML & JavaScript?

Please copy below code and write your own google API key. In next segment i will show you how to get google API key ?

<!DOCTYPE html>

<html>

<body>

<div id=”mapLocation” style=”width:100%;height:500px;”></div>

<script>

 

function showMap() {

var mapOptions= {center:new google.maps.LatLng(19.0760,72.8777),zoom:15};

var myMap = new google.maps.Map(document.getElementById(“mapLocation”),mapOptions);

}

</script>

<script src=”https://maps.googleapis.com/maps/api/js?key=COPY_YOUR_OWN_KEY_HERE&callback=showMap”></script>

</body>

</html>

In above example mapOptions shows different properties available to show map in proper way.

center : provide value for latitude & longitude

zoom : It defines how much zoom you want on default loading of a map.

How to get Google API key?

Please follow below steps to get your own API Key :

  1. Please login to Google Cloud Platform Console using your google email & password.
  2. Go to Credentials Section & Click on Create new API key.
  3. After that the unique code has been automatic generated by google which further you can use in Google API key to show maps.
  4. Don’t forget to Enable Maps JavaScript API under APIs section without this you can’t show the google maps on your website.

How to show location pointer for particular latitude & longitude ?

<!DOCTYPE html>

<html>

<body>

<div id=”mapLocation” style=”width:100%;height:500px;”></div>

<script>

function showMap() {

var mapOptions= {center:new google.maps.LatLng(19.0760,72.8777),zoom:15};

var myMap = new google.maps.Map(document.getElementById(“mapLocation”),mapOptions);

var pointer = new google.maps.Marker({ icon:’filename.png’});

pointer.setMap(myMap);

}

</script>

<script src=”https://maps.googleapis.com/maps/api/js?key=COPY_YOUR_OWN_KEY_HERE&callback=showMap”></script>

</body>

</html>

In above example we can customize the pointer position, icon, animation. You can try with different options. By using Google Overlays we can show circle, polygon shaped map. If you looking for implement google maps in ionic application then this post will help you.

Leave a Comment