One of the web applications we are working on here in Bootyard is a rental platform where users can lend and rent items online.
The platform has many features that make rental transactions easy online. Some of the features are pages where the user uploaded pictures and details of items can be categorically viewed, via categorised pages, and also be searched via a page with a search form.
The pages where you can see the uploaded items have a portion for a map, where actual locations of the items can be seen. Item locations are set by the users, or lenders, when they added details about the for rent item. The item locations, which are based on latitude and longitude, are represented by icons in the map.
Here is a screenshot of how the icons are shown in the map.
Listing locations represented by custom Google Map marker icons.
The default icon for a map marker is a red dropper. You can customise the icon by specifying an image url into it's `icon` option, that is how we achieved that implementation above.
I was tasked to update the map's appearance and meet some new map requirements.
Below is a screenshot of the expected output.
Desired map implementation.
So, looking at the picture, there are multiple things we need to do.
Replace the map marker icons with brown circles.
The numbers on the circle markers suggests that the markers should reflect how many items are listed on a same location.
The markers with the `H` on them suggests a location where only one item is present.
Notice the pale `H` icon on the upper-right. That indicates that the user's cursor is hovered on the listing it represent. Let's call it an active marker.
Customised Google Map marker icons is not a good idea for this task because, since it uses images, you will have to create an image for all the possible number of items that would be needed by the map.
Google Map Overlay
Introducing Google Map Overlay. Reading the documentation, overlays can somehow be used similarly to markers. Like markers, overlays positions in the map are also defined by coordinates of latitude and longitude.
The best thing for our task, we can define html elements and html element designs upon creation of an overlay. Now we can easily achieve the circle shape, brown colour, and set dynamically set the caption on the shape, in our case, a number or an `H`.
Here is the actual implementation:
Remove the flag icons from the marker.
Since we no longer need the custom marker icon image. We will set the icon url option to blank("") when we add a marker to the map:
Here is the code:
<div class='marker marker-active'><span></span></div>
What we actually did here in this implementation was use overlays as replacement for the marker icons. One of the many pros, since overlays are html elements, they load faster than images.
So if you want to implement dynamic marker icons for your Google Map, take a look at Google Map overlays.