Recently I had to incorporate Google map functionality on list of contact cards. I though it would be interesting to outline a decision map of what went into the design and development.

My first thought for the map functionality was to embed the map alongside the contact. This was quickly discounted since we had too many contacts on the same page (with a possibility of infinite scroll in the future). Although I could lazily load maps, one too many map requests did not make a lot of sense when all the user wanted did was to search and open a specific contact.

That made me transfer the map component to a popup (aka a detail) view.

The next problem was to embed the maps, which was easily done with Google API calls. However, the client organization “anticipated” many such API requests going out and, hence, exceeding the free API limit.

From experience with similar companies, this was not quite a common problem but the organization persisted on the requirement. More over, we also expected users to interact with the map for directions in specific use cases. Considering these factors, the popup to the actual Google Maps was perceived to be better and more user friendly.

I changed the design to a simple hard-coded map image that takes user to the actual Google map with focus on the address. The component uses Vue and Vuetify.

• Create a new field to hold latitude and longitude. Note to self to populate that whenever user selects address from a map
• Use latitude/longitude or the actual address to create the URL string. Open URL in new tab/window

The Vue component is simple -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- Contact.vue -->
<!-- below code sits in toolbar slot of a parent component -->
<template>
  <div>
    <v-btn small outline @click="openGoogleMap(item)">
      <v-icon class="mr-1">directions</v-icon>Location
    </v-btn>
  </div>
</template>

<script>
  export default {
    methods: {
      openGoogleMap(item) {
        const urlSuffix = item["latitude_longitude"]
          ? item["latitude_longitude"]
          : item["street_address_1"] +
            ", " +
            item["street_address_2"] +
            ", " +
            item["city"] +
            ", " +
            item["postal_code"];

        window.open(
          "https://www.google.com/maps/search/?api=1&query=" + urlSuffix,
          "_blank"
        );
      },
    },
  };
</script>