Monday, September 19, 2022
HomeWeb DevelopmentThe best way to Construct a Customized Google Map With Trendy SVG...

The best way to Construct a Customized Google Map With Trendy SVG Markers


Mission Construction

For this train, our customized Google Map demo will stay on GitHub (not on CodePen). Right here’s the venture construction:

1. Scaffolding the Mission

Earlier than we begin creating our venture (that may seem like a mini app) there are some things that we’ve got to think about.

Seize a Google Maps API key

As a primary and obligatory factor, we must always get a  Google Maps API key. To take action, we have to comply with these directions and arrange a venture within the Google Cloud Console with the Maps JavaScript API enabled.

For this demonstration, we’ll borrow an API key from an outdated but nonetheless well-liked collection known as The Google Maps API For Designers. There’s additionally an related demo from the place we will extract the API. 

warning

This demo API key has utilization limits! Ensure to register in your personal API key and substitute the one within the instance.

Final however not least, as quickly as you arrange such a venture within the Google Cloud Console, it’s all the time sensible to limit the related API. For instance, you might need a single venture and an API that you just share throughout all of your web site purchasers. In such a case, you possibly can limit the API requests to particular web sites.

How to restrict an API key on certain websitesHow to restrict an API key on certain websitesHow to restrict an API key on certain websites

Seize Some Knowledge

To create the markers and make our venture as life like as potential, we’ll want some real-world information. With this in thoughts, as beforehand talked about, we’ll take 13 of the Adobe workplace places and pin them on our map.

As we’ll see later, every location wants to incorporate its latitude and longitude. As this information isn’t accessible on Adobe’s contact web page, we’ll use the LangLong.internet web site to retrieve their coordinates. A few of the coordinates may not be completely correct, however you get the purpose.

Seize Some Icons

To boost the demo look, we’ll want some icons.

Envato Parts offers lots of of various map and navigation icons for our wants. On this case, we’ll go along with an icon set that follows a stuffed line fashion. As we noticed from the venture construction, the chosen SVG icons will stay contained in the img folder.

The icon pack that we're going to useThe icon pack that we're going to useThe icon pack that we're going to use

Listed here are the SVG icons we’ll use in our venture:

svg icons for custom google mapsvg icons for custom google mapsvg icons for custom google map

Embrace Bootstrap Recordsdata

Lastly, though not required, to hurry up the event course of we’ll additionally embrace Bootstrap in our venture by following the CDN method, as described on this web page.

2. Outline the Web page Markup

Now that we’ve got the whole lot arrange, let’s have a look at our markup.

Required Recordsdata

Under you possibly can see the beginning markup with all of the required Bootstrap recordsdata, our recordsdata, and the script tag for the Maps JavaScript API:

Simply check out the script tag for the Maps JavaScript API.  You’ll see two attributes:

  • The src attribute contains the bottom name to the Maps JavaScript API together with three parameters: two required and one non-obligatory. The required key parameter shops our API key as retrieved from the Google Cloud Console. The non-obligatory language parameter determines the map’s language (location names, labels, and so forth.). The required callback parameter defines the title of the worldwide perform that may fireplace as soon as the Maps JavaScript API finishes its load.
  • The async parameter tells the browser to asynchronously obtain and execute the script. 

Customized Google Map Format

Earlier than having a more in-depth have a look at the web page parts, let’s focus on the structure necessities.

  • On cellular screens (<768px), the structure might be like this:
The mobile layoutThe mobile layoutThe mobile layout

  • On medium and huge screens (≥768px), there might be two equal-width columns:
The desktop layoutThe desktop layoutThe desktop layout

  • In every case, the map will cowl the window top. 

Right here’s the related markup stuffed with Bootstrap helper courses:

Most significantly, discover two issues:

  • Every location hyperlink, which represents an Adobe location, comes with the data-index attribute. Maintain this attribute in thoughts, as we’ll use it afterward.
  • There’s an empty factor with the map ID. It will embrace the map contents and might be generated by JavaScript. 

3. Add the JavaScript

At this level, we’re able to construct the core performance of our customized Google Map venture. Let’s do it!

Retailer Areas

We captured the places within the markup, however we additionally want them in JavaScript. So, let’s retailer them below an array like this:

Understand that we protect the order through which the places seem each within the markup and object. A location with the data-index="0" within the markup denotes that the identical location needs to be within the first place of the pins array.

Be aware: in a real-world situation, there would in all probability be a backend language to handle all places in a single place. For instance, if you happen to’re conversant in WordPress and the ACF PRO plugin, you’ll in all probability have a versatile content material or a repeater discipline the place you place all places. Inside it, there might be additional fields for managing the situation particulars. Particularly for grabbing the coordinates of every location, you possibly can have a Google Map discipline. Then, by way of the wp_localize_script() you’re capable of go the places within the JavaScript and construct an object much like the one we’ve got right here.

Initialize Customized Google Map

Arising subsequent, we’ll initialize the map by the initMap() that we confirmed earlier than. 

Our map could have the next customizations:

  • It’ll be centered in London, UK.
  • It’ll have zoom: 3 to see as many places as potential by default.
  • We’ll customise its default kinds by this software, however you possibly can all the time go for cloud-based map styling. Most notably, we’ll change the default shade of the water like this:
Google Maps: custom styles vs default stylesGoogle Maps: custom styles vs default stylesGoogle Maps: custom styles vs default styles

With all of the above in thoughts, right here’s the beginning physique of our perform:

Create Google Map Markers

Contained in the initMap() perform, we’ll additionally name the createMarkers() perform for creating the situation markers:

Inside this perform, we’ll do the next issues:

  • Initialize an information window that may show details about a marker every time somebody clicks on it.
  • Change the default marker icon with a customized SVG one.
custom marker vs default markercustom marker vs default markercustom marker vs default marker

  • Loop by the places and place them on the map based mostly on their coordinates. Additionally, make them seem with a DROP animation.
  • Retailer every marker occasion within the markers array. We’ll see why later.

Right here’s the perform declaration:

Toggle Data Window

Contained in the createMarkers() perform, we’ll additionally register a click on occasion for every marker.

Every time a person clicks on a marker, we’ll carry out the next actions:

  • Populate the information window’s content material with contents related to this marker because of the createInfoContent() perform.
  • Set the map’s middle based mostly on the coordinates of this marker.
  • Present the information window.
  • Take away the energetic class from any related location hyperlink, if any.
  • Discover the situation hyperlink whose index matches the index of this marker and provides it the energetic class. It will give the goal hyperlink a blue background shade.
The active stateThe active stateThe active state

  • Easy scroll to the corresponding location hyperlink.

Populate Data Window

As we mentioned, the job of the createInfoContent() perform might be to feed the information window with the contents of the clicked marker. 

We’ll use simple markup to show the contents of every marker. On condition that some places don’t all the time have all the main points, we’ll apply some checks to make sure that our markup received’t be bloated.

How the info window will look likeHow the info window will look likeHow the info window will look like

Right here’s the perform declaration:

We mentioned what ought to occur when a marker is clicked. However we additionally want to use some performance when the other occurs. In different phrases, we need to be certain that every time a person clicks on a location hyperlink, the corresponding marker might be clicked.

One other perform, the showLocations() one, might be liable for dealing with this performance. This will even stay contained in the initMap() perform.

So, every time a location hyperlink is clicked, we’ll carry out the next actions:

  • Cancel its default conduct.
  • Take away the energetic class from any location hyperlink, if any.
  • Add the energetic class to this hyperlink.
  • Easy scroll to the map.
  • Discover the marker whose index matches the index of this hyperlink and set off its click on occasion. We’re capable of goal the required marker as a result of we’ve saved it in a earlier step contained in the markers array.

Right here’s the perform definition:

Conclusion

And we’re performed! This was fairly an extended journey, however I hope that you just loved it and that it has helped improve your abilities relating to the Google Maps JavaScript API.

As soon as once more, don’t overlook to place your individual key for stay venture testing! Right here’s the venture hyperlink

Issues don’t cease right here. We are able to proceed enhancing/extending this venture by doing quite a few issues, for example:

  • Put into desk marker clusters for grouping markers. It is a good addition, particularly for circumstances the place there are plenty of markers.
  • Make this venture dynamic by utilizing WordPress and ACF PRO, as defined in a couple of sections above. Relying on how this venture goes, I’ll in all probability come again with such a tutorial sooner or later 🙂
  • Prohibit the map boundaries to keep away from displaying a grey space throughout dragging or zooming out.
The gray area that appears during dragging and zooming outThe gray area that appears during dragging and zooming outThe gray area that appears during dragging and zooming out

As all the time, thanks loads for studying!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments