diff --git a/geolocation.install b/geolocation.install
index 1d0fb02..eca5964 100644
--- a/geolocation.install
+++ b/geolocation.install
@@ -116,3 +116,39 @@ function geolocation_get_geolocation_fields() {
   }
   return $fields;
 }
+
+/**
+ * Update map dimensions to allow responsive settings.
+ */
+function geolocation_update_7102() {
+  $result = db_query("SELECT id, field_name, data FROM {field_config} WHERE module = 'geolocation' AND type = 'geolocation_latlng'");
+  foreach ($result as $field) {
+
+    $field_id = $field->id;
+    $name = $field->field_name;
+    $field_data = unserialize($field->data);
+
+    $instances = db_query("SELECT id, data FROM {field_config_instance} WHERE field_id = :field_id", array(':field_id' => $field_id));
+    foreach ($instances as $instance) {
+
+      // If this field has been updated already, we want to skip it.
+      $instance_data = unserialize($instance->data);
+      foreach ($instance_data['display'] as $key => $display) {
+
+        if (isset($display['settings']['map_dimensions'])) {
+          $map_diemensions = explode('x', $display['settings']['map_dimensions']);
+          unset($instance_data['display'][$key]['settings']['map_dimensions']);
+          $instance_data['display'][$key]['settings']['map_width'] = $map_diemensions['0'] . 'px';
+          $instance_data['display'][$key]['settings']['map_height'] = $map_diemensions['1'] . 'px';
+
+          // update the database.
+          $num_updated = db_update('field_config_instance')
+            ->fields(array('data' => serialize($instance_data)))
+            ->condition('id', $instance->id)
+            ->execute();
+        }
+      }
+    }
+  }
+  return t('Updated Geolocation Field map dimensions to allow responsive settings.');
+}
diff --git a/modules/geolocation_googlemaps/geolocation_googlemaps.module b/modules/geolocation_googlemaps/geolocation_googlemaps.module
index 46a24a4..8beb598 100644
--- a/modules/geolocation_googlemaps/geolocation_googlemaps.module
+++ b/modules/geolocation_googlemaps/geolocation_googlemaps.module
@@ -14,7 +14,8 @@ function geolocation_googlemaps_field_formatter_info() {
       'label' => t('Static Google Map'),
       'field types' => array('geolocation_latlng', 'geofield'),
       'settings' => array(
-        'map_dimensions' => '300x300',
+        'map_width' => '300px',
+        'map_height' => '300px',
         'map_zoomlevel' => '7',
         'map_imageformat' => 'png8',
         'map_maptype' => 'roadmap',
@@ -25,7 +26,8 @@ function geolocation_googlemaps_field_formatter_info() {
       'label' => t('Dynamic Google Map'),
       'field types' => array('geolocation_latlng', 'geofield'),
       'settings' => array(
-        'map_dimensions' => '300x300',
+        'map_width' => '300px',
+        'map_height' => '300px',
         'map_zoomlevel' => '7',
         'map_imageformat' => 'png8',
         'map_maptype' => 'roadmap',
@@ -49,12 +51,20 @@ function geolocation_googlemaps_field_formatter_settings_form($field, $instance,
 
   // Implement some configuration options.
   // http://code.google.com/intl/en/apis/maps/documentation/staticmaps/
-  $element['map_dimensions'] = array(
+  $element['map_width'] = array(
     '#type' => 'textfield',
-    '#title' => t('Map dimensions'),
-    '#description' => t('Enter custom map dimensions, default is 300x300.'),
-    '#default_value' => $settings['map_dimensions'],
+    '#title' => t('Map width'),
+    '#description' => t('Enter custom map width (e.g. 300px or 300%), default is 300px.'),
+    '#default_value' => $settings['map_width'],
   );
+
+  $element['map_height'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Map height'),
+    '#description' => t('Enter custom map height (e.g. 300px or 300%), default is 300px.'),
+    '#default_value' => $settings['map_height'],
+  );
+
   $element['marker_icon'] = array(
     '#type' => 'textfield',
     '#title' => t('Marker icon'),
@@ -143,7 +153,7 @@ function geolocation_googlemaps_field_formatter_settings_summary($field, $instan
   $type = $display['type'];
   $settings = $display['settings'];
 
-  $summary = '<strong>Map:</strong> ' . $settings['map_dimensions'];
+  $summary = t("<strong>Map:</strong> !mapwidth by !mapheight", array('!mapwidth' => $settings['map_width'], '!mapheight' => $settings['map_height']));
   switch ($type) {
     case 'geolocation_googlemaps_static':
       $summary .= ' (' . $settings['map_imageformat'] . ')';
@@ -174,6 +184,27 @@ function geolocation_googlemaps_field_formatter_view($entity_type, $entity, $fie
   $settings = $display['settings'];
   $element = array();
   $lat_key = 'lat';
+
+  if (strpos($settings['map_height'], 'px')) {
+    $height = strtok($settings['map_height'], 'p');
+  }
+  elseif (strpos($settings['map_height'], '%')) {
+    $height = strtok($settings['map_height'], '%');
+  }
+  elseif (!strpos($settings['map_height'], '%') || !strpos($settings['map_height'], 'px')) {
+    $height = $settings['map_height'];
+  }
+
+  if (strpos($settings['map_width'], 'px')) {
+    $width = strtok($settings['map_width'], 'p');
+  }
+  elseif (strpos($settings['map_width'], '%')) {
+    $width = strtok($settings['map_width'], '%');
+  }
+  elseif (!strpos($settings['map_width'], '%') || !strpos($settings['map_width'], 'px')) {
+    $width = $settings['map_width'];
+  }
+
   // To make this widget compatible with geofiled we need to rename the keys for
   // longitude. Geofield uses "lon" while Geolocation Field uses "lng".
   $lng_key = ($field['type'] == 'geofield') ? 'lon' : 'lng';
@@ -185,7 +216,7 @@ function geolocation_googlemaps_field_formatter_view($entity_type, $entity, $fie
         $query = array(
           'sensor' => 'false',
           'zoom' => $settings['map_zoomlevel'],
-          'size' => $settings['map_dimensions'],
+          'size' => $width . "x" . $height,
           'format' => $settings['map_imageformat'],
           'maptype' => $settings['map_maptype'],
           'markers' => 'size:mid|color:red|' . $item[$lat_key] . ',' . $item[$lng_key],
@@ -211,8 +242,8 @@ function geolocation_googlemaps_field_formatter_view($entity_type, $entity, $fie
 
       foreach ($items as $delta => $item) {
 
-        $width = strtok($settings['map_dimensions'], 'x') . "px";
-        $height = strtok('') . "px";
+      $width = $settings['map_width'];
+      $height = $settings['map_height'];
 
         $id = 'geolocation-googlemaps-dynamic-' . 'e_' . $eid . 'i_' . $instance['id'] . '-d_' . $delta;
         $map_element['googlemap'] = array(
@@ -310,7 +341,7 @@ function geolocation_googlemaps_field_widget_settings_form($field, $instance) {
 function geolocation_googlemaps_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {
 
   // In order to make Geolocation field work with the popular Field collection module
-  // we check if our map widget is part of a Field collection and add the 
+  // we check if our map widget is part of a Field collection and add the
   // #field_parents delta.
   if ($instance['entity_type'] == 'field_collection_item') {
     $depth = count($element['#field_parents']) - 1;
@@ -326,7 +357,8 @@ function geolocation_googlemaps_field_widget_form(&$form, &$form_state, $field,
   // longitude. Geofield uses "lon" while Geolocation Field uses "lng".
   if ($field['type'] == 'geofield') {
     $lng_value = isset($items[$delta]['lon']) ? $items[$delta]['lon'] : NULL;
-  } else {
+  }
+  else {
     $lng_value = isset($items[$delta]['lng']) ? $items[$delta]['lng'] : NULL;
   }
   $element += array(