Friday, September 6, 2013

Responsive web design - google maps

Hello again,

So as promised, today we will cover google maps API with jquery on your website.
1. First problem we faced once we switched to responsive layout was with google maps rendering. I guess the reason for that was unknown width and height of the container and then the map just some crazy stuff leaving us very unhappy.
2. Another problem was that we were unable to display more than 10 markers on the map.

1. We changed the API (initially we used some third party jquery API which worked great when we were displaying up to 10 markers on the map, and we were displaying only 1). So we switched to jquery ui map API. New API let us add markers dynamically and as many as we wanted.

Before we continue, let's just step into the code to give you a better understanding:
a. Add link to google maps api
<script type="text/javascript" src=""></script>

b. Add link to jquery library (you need to download it first)
<script type="text/javascript" src="/Scripts/"></script>

c. Add "div" tag which will be holding your map.
<div id="allbarsmap" class="fullmap"></div>

d. Your Jquery:
var bars = $.parseJSON([your json data here]);
$("#allbarsmap").gmap().bind('init', function (ev, map) {
    var i = 0;
    for (i = 0; i < bars.length; i++) {
        ("#allbarsmap").gmap('addMarker', { 'position': bars[i]['position'], 'bounds': true, 'icon': '/img/bar.png', 'title': bars[i]['html'] }).click(function () {
            ("#allbarsmap").gmap('openInfoWindow', { 'content': this.title }, this);


So what do we do here? First thing we receive JSON string with all the markers, convert it into json object. Then we call .gmap() function on our div object and simply loop through all the elements in json string calling addMarker function which in fact places marker on the map.

Simple and beautiful isn't it? Well yes, but there are a few more things to do.

2. Rendering issue, right? Okay, if you faced the same problem and your map is not displayed properly due to your layout changes width of the container depending on the size of the device or browser, then you can simply add following line of code:
It refreshes the view and your map looks the way you want :-)

Okay at this point everything was perfect beside the fact that we did not have latitude and longitude in our database and were not really sure how to calculate those for accurate markers placing.

Don't you worry, we found solution for this problem as well. Although it involved some extra changes. So we added latitude and longitude fields to our database and here is a jquery solution to retrieve those two fields by object's address:

var geocoder = new google.maps.Geocoder();
var lat = '';
var lng = '';
  address: address + ', ' + city + ', ' + country
  }, function (results, status) {
   if (status === google.maps.GeocoderStatus.OK) {
    lat = results[0];
    lng = results[0].geometry.location.lng();

   // do magic here

So this is it. Of course it requires some extra coding, but once this is done, you have your coordinates in the database (or wherever you store your data) and you load them fast and painless.

I hope you found it useful and feel free to ask any questions or comment if you found some problems with our solution.

Your GPTeam


Post a Comment