Show marker on google map using latitude and longitude with info window

Show marker on google map using latitude and longitude with info window

In this post we will give you information about Show marker on google map using latitude and longitude with info window. Hear we will give you detail about Show marker on google map using latitude and longitude with info windowAnd how to use it also give you demo for it if it is necessary.

Show marker on google map using latitude and longitude with info window

In this post, I will tell you how to show marker over google map and display information on marker with popup window using JavaScript.

Here i will show marker in google map by using latitude and longitude.

With this post, you would be able to integrate Google map into your application where you need it.

After complete step, i will show you a demo where you will see how this functionality will work.

First i will have to include javascript library for google map API.

  1. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

Now i will create a javascript function initialize().

function initialize() {
}

In this initialize method, I will put the address latitude and longitude and then initialize map by using new google.maps.Map() with map option and assign it into the map variable.

If you will need to show a popup on marker for additional info then you need to attach an event handler to marker to open info window with additional info and there you can customize template for popup window.

  1. <script type="text/javascript">
  2. functioninitialize(){
  3. var latlng =new google.maps.LatLng(28.535516,77.391026);
  4. var map =new google.maps.Map(document.getElementById('map'),{
  5. center: latlng,
  6. zoom:13
  7. });
  8. var marker =new google.maps.Marker({
  9. map: map,
  10. position: latlng,
  11. draggable:false,
  12. anchorPoint:new google.maps.Point(,-29)
  13. });
  14. var infowindow =new google.maps.InfoWindow();
  15. google.maps.event.addListener(marker,'click',function(){
  16. var iwContent ='<div id="iw_container">'+
  17. '<div ><b>Location</b> : Noida</div></div>';
  18. // including content to the infowindow
  19. infowindow.setContent(iwContent);
  20. // opening the infowindow in the current map and at the current marker location
  21. infowindow.open(map, marker);
  22. });
  23. }
  24. google.maps.event.addDomListener(window,'load', initialize);
  25. </script>
<script type="text/javascript">
function initialize() {
   var latlng = new google.maps.LatLng(28.535516,77.391026);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: latlng,
      zoom: 13
    });
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable: false,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var infowindow = new google.maps.InfoWindow();   

    google.maps.event.addListener(marker, 'click', function() {
      var iwContent = '<div id="iw_container">' +
      '<div ><b>Location</b> : Noida</div></div>';
      // including content to the infowindow
      infowindow.setContent(iwContent);
      // opening the infowindow in the current map and at the current marker location
      infowindow.open(map, marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>


Now i need HTML area where i will display map :

  1. <divid="map"style="width: 100%; height: 300px;"></div>
<div id="map" style="width: 100%; height: 300px;"></div>  

Show Demo

Label :

Google API

HTML

jQuery

How To

API

Web Development

JavaScript

Hope this code and post will helped you for implement Show marker on google map using latitude and longitude with info window. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

79  +    =  82

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US