Javascript media queries to run different scripts dependant on viewport size

Question

I am a complete beginner, but trying to get where I need to go with a few snippets of code here and there.

I have a map on a webpage, i need to run 1 of 3 very similar scripts dependant on the viewport size. I understand I cannot load a .js file using css media queries which I can get my head around.

I have found a few pointers and am now using the following snippet which selects one script for <480px or another if bigger. I would like to use the following screen sizes <480px 480-768px and >769px.

Any advice would be much appreciated, I just want to know how to add another media query or two, the current code is as follows:

if ( $(window).width() < 481) {

var mycity=new google.maps.LatLng(51.xxx, 0.xxx);
function initialize()
{
var mapProp = {
 center:mycity,
 zoom:10,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
var myCity = new google.maps.Circle({
 center:mycity,
 radius:32186,
 strokeColor:"#0000FF",
 strokeOpacity:0.8,
 strokeWeight:2,
 fillColor:"#00FF00",       <!--lime green mobile-->
 fillOpacity:0.2
 });
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

} 
else {

var mycity=new google.maps.LatLng(51.xxx, 0.xxx);
function initialize()
{
var mapProp = {
 center:mycity,
 zoom:11,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
var myCity = new google.maps.Circle({
 center:Pembury,
 radius:32186,
 strokeColor:"#0000FF",
 strokeOpacity:0.8,
 strokeWeight:2,
 fillColor:"#FF00FF",     <!--magenta desktop-->
 fillOpacity:0.2
 });
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
}

`

Answer 1

It seems like the only difference between the 2 functions are some properties you're setting on the map. You have a different zoom, center and fillColor for the circle. You could create a single function and pass different arguments depending on viewport size.

var mycity=new google.maps.LatLng(51.xxx, 0.xxx);
var myothercity=new google.maps.LatLng(51.xxx, 0.xxx);

if($window.width() < 481)
    createMap(10, mycity, '#00ff00');
else
    createMap(11, myothercity, '#ff00ff');

function createMap(zoom, center, fillColor) {        
    function initialize()
    {
    var mapProp = {
     center:center,
     zoom:zoom,
     mapTypeId:google.maps.MapTypeId.ROADMAP
     };
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
    var myCity = new google.maps.Circle({
     center:center,
     radius:32186,
     strokeColor:"#0000FF",
     strokeOpacity:0.8,
     strokeWeight:2,
     fillColor:fillColor,       <!--lime green mobile-->
     fillOpacity:0.2
     });
    myCity.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
}