14500+ website owners are using this wordpress map plugin

Buy Now - $89

How to use Lat/Lng Object Literal in Maps?

Introduction:

In this tutorial, a LatLng object literal is used instead of a google.maps. To centre the map and add a marker, use the LatLng object. LatLng object literals are a quick way to add a LatLng coordinate and, in most cases, can replace a google.maps. the LatLng object.

Code:

// In this example, we center the map, and add a marker, using a LatLng object
// literal instead of a google.maps.LatLng object. LatLng object literals are
// a convenient way to add a LatLng coordinate and, in most cases, can be used
// in place of a google.maps.LatLng object.
let map: google.maps.Map;

function initMap(): void {
const mapOptions = {
zoom: 8,
center: { lat: -34.397, lng: 150.644 },
};

map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
mapOptions
);

const marker = new google.maps.Marker({
// The below line is equivalent to writing:
// position: new google.maps.LatLng(-34.397, 150.644)
position: { lat: -34.397, lng: 150.644 },
map: map,
});

// You can use a LatLng literal in place of a google.maps.LatLng object when
// creating the Marker object. Once the Marker object is instantiated, its
// position will be available as a google.maps.LatLng object. In this case,
// we retrieve the marker's position using the
// google.maps.LatLng.getPosition() method.
const infowindow = new google.maps.InfoWindow({
content: "Marker Location:" + marker.getPosition() + " Marker Location:" + marker.getPosition() +", });
});

google.maps.event.addListener(marker, "click", () => {
infowindow.open(map, marker);
});
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
export {};

Explanation:

  • The function initMap() is created and it consists of the map properties.
  • The ‘centre’ attribute defines where the map should be centered with the help of the latitude and longitude coordinates.
  • center: { lat: -34.397, lng: 150.644 },
    
  • The ‘zoom’ attribute specifies the map’s zoom level.
  • zoom: 8,
    
  • The line, “map = new google.maps.Map(document.getElementById(“map”)”; creates a new map inside the <div> element with the help of the mentioned id which is ‘map’ as an HTMLElement.
  • map = new google.maps.Map(
        document.getElementById("map") as HTMLElement,
    
  • The markers are added to the map using the Marker(). Positions are mentioned for the marker on the map.
  •   const marker = new google.maps.Marker({
        position: { lat: -34.397, lng: 150.644 },
        map: map,
      });
    

Note:

You can use a LatLng literal in place of a google.maps.LatLng object when creating the Marker object. Once the Marker object is instantiated, its position will be available as a google.maps.LatLng object. In this case, we retrieve the marker’s position using the google.maps.LatLng.getPosition() method.

  • Next, the infowindow() is used to create the new infowindow().
  • const infowindow = new google.maps.InfoWindow({
        content: "

    Marker Location:" + marker.getPosition() + "

    ", });
  • Further, the addListener() is added to the map.
  • google.maps.event.addListener(marker, "click", () => {
        infowindow.open(map, marker);
    
  • Lastly, the function is called and executed.
  • window.initMap = initMap;
    

Conclusion:

Thus, in this tutorial we saw an example demonstrates using a LatLng object literal instead of a google.maps.LatLng object, to center the map and add a marker. LatLng object literals are a convenient way to add a LatLng coordinate and, in most cases, can be used in place of a google.maps.LatLng object.

Live Example

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.