On a recent site build there was a need to include a responsive, interactive Google map. The map also needed to display the organization’s location and a link for directions. Pretty standard but… not without its share of tricksy issues. I found a lot of information on the inter-webs which helped it respond smoothly¹, and that allowed me to add multiple tooltips with unique info windows². Responsive google maps won’t get us down! Along with using these helpful web resources I came up with a little edge on an issue I encountered on mobile views and other small touch devices. So, I’m paying it forward with this nugget of information.

The Problem

The Google Map was responsive, so we (the designers and I) thought we were all set - a map that goes from mobile to desktop and back! However, we remembered from previous projects that there was another issue to consider for mobile views and small touch devices. Once at the smallest screen size, the interactive Google map, which scrolls on touch, does not allow the user to move the screen past the map. This certainly creates an interesting conundrum for users. It blocks them from browsing the rest of the site or going anywhere else in their browser.

The design team and I discussed a few options - default to an image? include other links to find locations? Our solution was to use an image of the map, only for the mobile view, to eliminate the scroll issue. We still wanted the user to be able to quickly find the location on a mobile phone just as easily as a user on other sized screens - a simple click on the tooltip to find the link to get directions. Since we were eliminating the interactive map, we had an open canvas to recreate these interactions. For this we utilized Caleb Jacob’s and Louis Ameline’s tooltipster.js³.

We added our tooltips on the mobile view that recreated the look of the google map’s interactive ‘info windows’ and added in the same information. Essentially, we could have included separate, more mobile specific information if it called for it here.

Here’s the Markup for the Mobile specific area:

I created a container for the mobile map that is set to <code>display:none;</code> for larger screen sizes. There is the main container that responds to the browser. The image is positioned under two tooltips that mimic the location markers in Google maps. I added the tooltip content, including HTML, in the title tag based on tooltipster.js specs.

<div class="module mobile-map">
  <div class="locate-marker" id="berkeley">
    <a href="javascript:void(0);" class="my-tip" title='<div class="infoContent"><p>210 Rembert C Dennis Blvd.</p><p>Moncks Corner, SC 29461</p><p>(843) 761-9622</p><p><a href="https://maps.google.com/maps?ie=UTF-8&q=the+Y&fb=1&gl=us&hq=the+Y&hnear=the+Y&cid=6169160207694925131&ei=kW7yUsy-LoLakQeUx4GIDQ&ved=0CJ0BEPwSMAs" target="_blank">Get Directions</a></p></div>'><img src="/mobile-map/assets/images/icons/marker.svg" alt="marker icon"></a>
  </div>
  <div class="locate-marker" id="cannon">
    <a href="javascript:void(0);" class="my-tip" title='<div class="infoContent"><p>61 Cannon Street</p><p>Charleston, SC 29403</p><p>(843) 374-1500</p><p><a href="https://maps.google.com/maps?ie=UTF-8&q=the+Y&fb=1&gl=us&hq=the+Y&hnear=the+Y&cid=6169160207694925131&ei=kW7yUsy-LoLakQeUx4GIDQ&ved=0CJ0BEPwSMAs" target="_blank">Get Directions</a></p></div>'><img src="/mobile-map/assets/images/icons/marker.svg" alt="marker icon"></a>
  </div>
</div>

The jQuery:

A simple use of tool tipster to get the markers to show unique info windows. The users can click on the directions link and see the information just like on an interactive Google map!

$(document).ready(function(){
  $(‘a.my-tip’).tooltipster({  	  	      
    contentAsHTML: true, // allows use of HTML tags in tooltip
    interactive: true,   // tooltip will remain open and allow user to click on links inside of tooltip
    trigger: 'click’,    // trigger is click
    minWidth: '210',
    onlyOne: true,       // allows only one tooltip open at a time
    arrowColor: '#fff',  // styles for the color of the tooltip arrow
    offsetY: 15,         // offset the tooltip on the y-axis
    theme: 'my-tipster'  // my own theme styles
  });
});

The Styles

These styles are for small screens only. I’ve added my own styles to tool tipsters to get the look similar to the Google info windows. And positioned the markers on the image where the points would show up in an interactive Google map. So when users are on larger screens, the transition to the interactive version works like a charm.

.my-tipster {
  border-radius: 3px;
  border: none;
  background: #fff;
  color: #666;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 1, 1, 0.25);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0, 1, 1, 0.25);
  box-shadow: 3px 3px 5px 0px rgba(0, 1, 1, 0.25);
}
.my-tipster .tooltipster-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 16px;
  padding: 25px 15px;
  text-align: center;
}
.my-tipster .tooltipster-content p {
  font-size: 16px;
  line-height: 24px;
}
.mobile-map {
  position: relative;
  z-index: 0;
  padding: 0;
}
.mobile-map .locate-marker {
  position: absolute;
  z-index: 4;
  display: block;
}
.mobile-map .locate-marker img {
  width: auto;
}
.mobile-map #berkeley {
  top: 25%;
  left: 45%;
}
.mobile-map #cannon {
  top: 65%;
  left: 52%;
}
.mobile-map img {
  width: 100%;
}

There you have it! A mobile friendly version of Google Maps info windows!! Download the example and source files.