CODEWITHSUNDEEP
htmlgoogle-maps
Melo
Melo

Reputation: 23

i want to display map on my website and i want it to have a signage about the specific place based on the longitude and latitude given

I tried this following codes:

It only appears like this

What i want to appear

<!DOCTYPE html>
<html>

<head>
  <style>
    #map {
      width: 500px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var mapDiv = document.getElementById('map');
      var map = new google.maps.Map(mapDiv, {
        center: {
          lat: 44.540,
          lng: -78.546
        },
        zoom: 16
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>

</html>

Upvotes: 0

Views: 35

Answers (1)

BobbyTables
BobbyTables

Reputation: 4715

You need to add a marker to your map, here is the documentation for adding a marker in javascript: https://developers.google.com/maps/documentation/javascript/markers#add

It works like this:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044}; //MARKER POSITION

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

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

Upvotes: 1

Related Questions