Introduction: This example generates a Japanese-language map independent of the user’s browser settings. The region is also set to Japan, skewing the geocoding findings to that country. You can tailor your map to a specific country or region by doing the following: Change the language settings to something other than English. Enter a region code […]
How to set Right-to-left languages?
Introduction: In this tutorial we will learn to create a map that renders a map of Cairo, Egypt in Arabic. This example displays a map with the language set to Arabic and the regions set to Egypt. These settings are specified in the HTML script element when loading the Google Maps JavaScript API. Setting the […]
How to Synchronously Load Map APIs?
Introduction: The Maps API is loaded synchronously in this case. The async and defer characteristics from the script tag that loads the API were removed, as was the callback argument. <html> <head> <title>Synchronous Loading</title> <script src=”https://polyfill.io/v3/polyfill.min.js?features=default”></script> <link rel=”stylesheet” type=”text/css” href=”./style.css” /> <script type=”module” src=”./index.js”></script> </head> <body> <div […]
How to use create Custom Map Projections?
Introduction: In this tutorial, we will learn with an example create a map using the Gall-Peters projection, rather than the default Mercator projection. The Earth is a three-dimensional spherical (roughly), whereas a map is a two-dimensional flat surface. The Maps JavaScript API map, like every flat map of the Earth, is a projection of that […]
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 […]
How to Use Simple Click Events in Maps?
Introduction: This tutorial shows how to use event listeners with simple click events. When a marker is clicked, this function listens for the click event and zooms the map. After 3 seconds, it listens for the center changed event and pans the map back to the marker. User events (such as mouse clicks) are sent […]
How to Listen DOM Events in Maps?
Introduction: In this tutorial, we will learn how to listen to DOM Events. Custom events are created and managed through the Maps JavaScript API event model. The DOM (Document Object Model) within the browser, on the other hand, develops and dispatches its own events based on the browser event model in use. The Maps JavaScript […]
How to get Properties with Event Handlers?
Introduction: In this tutorial, we will learn on how to get properties with the help of the Event Handlers. Below example listens for the zoom_changed event and updates an info window when the zoom level changes. When triggered, none of the MVC state change events in the Maps JavaScript API event system pass parameters. (User events do […]
How to get Lat/Lng from a click Event in Maps?
Introduction: In this tutorial, we will learn how to get the longitude and latitude of the map coordinates from the click Event. This example listens for the click event, retrieves the click’s latitude and longitude coordinates from google.maps.MapMouseEvent.latLng, and displays those coordinates in an info window. Code: function initMap() { const myLatlng = { lat: […]
How to use Closures in Event Listeners?
Introduction: In this tutorial, we will learn to create a map with tappable markers displaying a secret message. It is frequently desirable to have both private and persistent data associated to an object when performing an event listener. JavaScript does not offer “private” instance data, but it does have closures, which allow inner functions to […]
Proudly crafted & developed by flippercode.com