angular ui-router: using URL query parameters to define child state

Similar to this question and this issue I'm trying to use URL query parameters to define child states with ui-router :

.state('map', {
  url: '/map?country&city'
  templateUrl: 'templates/myMapTemplate.html',
    // no resolve in this case as using default data for map template
})
.state('map.country', {
  url: '?country',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    countryData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCountryBounds($stateParams.country)    // ajax server call
    }]
  }
})
.state('map.city', {
  url: '?city',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    cityData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCityBounds($stateParams.city)    // ajax server call
    }]
  }
})

The idea is that:
- having a different query parameter (or none at all) changes the state
- the resolve: of each child state can be specified to get different information from the server
- the template is the same for each state, but the data (ultimately) fed to the controller / template is different for each child state (retrieved via resolve)

eg.
www.mysite.com/map loads map with default data
www.mysite.com/map?country=US gets country data from server
www.mysite.com/map?city=sao_paulo gets city data from server

I've tried to set this up as above, but it won't work:
- no child state is recognised when adding URL parameters in the child state

Is it possible to use (optional) query parameters to change child state in ui-router?

(The docs don't specify much regarding query params)

Update #1: Created a plunker of the code above
Update #2: Created a 2nd plunker defining /map as an abstract state - which now works for changing states with ui-sref (and injects parameters into the resolve) - but href map?country=US still not recognised... ?