Javascript API TutorialsjQuery And Javascript Tutorials

How to hang a Marker in Google MAP API

In this article you will learn how to hang a marker on Google Map using API. You can hang a single marker, multiple pointer on same Map using Google Map API. In this tutorial we will learn how to hang a single marker on Google Map API. Before starting you need a Google Map API Key and Library. For getting an API Key and library you must follow some steps :-

Step 1 To get a genuine Google Map API Key. For getting API Key visit https://console.developers.google.com/iam-admin/projects . Create your project and then select your project. You can now search for Google Map API . Enable Google Map API and copy API Key provided. (Remember Google API has limits to access it.)

Step 2 After getting API now you can easily use it. Before using you must call Google Map API Library on page you want to use Google Map API. Replace <!–YOUR API KEY–> with your Google API Key in below code and paste it in your file where you want to call Google Map API Library.

<script src="https://maps.googleapis.com/maps/api/js?key=<!--YOUR API KEY-->&callback=initMap" async defer></script>

After following above steps you are now ready to hang markers on Google Map.

Here are steps to prepare for hanging markers in Google Map.

  1.  Create a file demo.html or demo.php with any name you want. You can also choose existing files.
  2.  Copy  below code in the file just.
<html>
   <head></head>

   <body>

   <script src="https://maps.googleapis.com/maps/api/js?key=<!--YOUR API KEY-->&callback=initMap" async defer></script>

   </body>

</html>

Remember to replace <!–YOUR API KEY–> with your API KEY in above file you created.

When you have prepared with the file then work on hanging markers into it.

Let’s Hang a Marker 

Step 1 : Edit the file you created above in file editor and add below code in between head tags as shown below..

<head>
 <style>
 #map{
 height:100%;
 }
 </style>
 <script>
 function initMap() {
 var myLatLng = {lat: -25.363, lng: 131.044};

 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 4,
 center: myLatLng
 });

 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map
 });

 }
 </script>
</head>

Step 2

Add a div in between body tags as shown below

<div id="map"></div>

Final code will appear is shown below

<html>
<head>
 <style>
 #map{
 height:100%;
 }
 </style>
 <script>
 function initMap() {
 var myLatLng = {lat: -25.363, lng: 131.044};

 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 4,
 center: myLatLng
 });

 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map
 });

 }
 </script>
</head>

<body>
    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=<!--YOUR API KEY-->&callback=initMap" async defer></script>
</body>

</html>

Save the file and Run it . Remember to replace your <!–YOUR API KEY–> with your key.

That’s it Your marker is embedded successfully .

For Demo Please visit : https://www.devildoxx.com/labs/googlemaps/singlemarker.html

Brief explanation of Code

<script src="https://maps.googleapis.com/maps/api/js?key=<!--YOUR API KEY-->&callback=initMap" async defer></script>

When you call Google Map API https://maps.googleapis.com/maps/api/js?key=AIzaSyDRRtJ3V8gB81zEQJCelij81w6fqzyIvJ0&callback=initMap .  You can see that in the last callback value is set to initMap which is basically function name that is called after library is loaded completely.

Note : Callback value can be changed to anything but you have to create a function in head tags with same value as function name. Like we have created in head tags.

<script>
function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 4,
              center: myLatLng
             });
    var marker = new google.maps.Marker({
                 position: myLatLng,
                 map: map
                });
}
</script>

Latitude and Longitude

In above function we have set value for variable  

myLatLng = {lat: -25.363, lng: 131.044};  

in which lat and lng stands for latitude and longitude. These values are used to define the location of marker. Just visit https://www.google.co.in/maps  then get your latitude and longitude value .

After defining latitude and longitude values create a variable map and call google map library as shown in above code. You can set options in it like zoom, center etc.

var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: myLatLng
          });

In above code we have also pass element by id “map” in which map will show. For showing map you need to set map div to 100% until map will not appear. Library checks the height and width of div then check where to embed the map.  So thats why we have added below code in head tags.

<style>
#map{
  height:100%;
}
</style>

Then for  hanging marker we have used a variable marker in which we call Google Maps Marker function as shown below

var marker = new google.maps.Marker({
position: myLatLng,
map: map
});

In marker function we have passed some values like position in which we pass our latitude and longitude variable, then map in which we pass map variable that is for calling google maps library.

For Demo Please visit : https://www.devildoxx.com/labs/googlemaps/singlemarker.html

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button