Google Maps settings and prototypal inheritance in ECMAScript

You can embed Google Maps with a simple iframe, but this way you can't customize the interface. Better use the JavaScript API.

CSS problems and fix

In my standard SASS/CSS I use almost always normalize.css or Meyer's reset css and

div{overflow:hidden;}

.image img{display:block;max-width:100%;height:auto;}

or similar (for a default responsive images behaviour) and

html{
  box-sizing: border-box;
}
*, *:before, *:after{
  box-sizing: inherit;
}

Using Google Maps Javascript API the maps inherit CSS styles of the site and display all grey.

To solve this you can add a CSS class and assign this styles. In this examples the map has a fixed height and full-width.

<div id="map-1" class="map" style="width:100%;height:200px;"></div>

SASS:

html{
  .map{
    div{overflow:visible;}
    *, *:before, *:after{
      box-sizing:content-box;
    }
    img{display:inline;max-width:none;}
  }
}

or simple CSS

html .map div{overflow:visible;}
html .map *, html .map *:before, html .map *:after{box-sizing:content-box;}
html .map img{display:inline;max-width:none;}

A standard example with this new CSS styles now works well.

How you can personalize maps styles as your default configuration?

Custom Google Map maps default configurations with Google Maps JavaScript API

Multiple maps with default custom styles and controls, You can stylize also pins icon, default zoom and center and all what you want.

function myMap() {
  this.options = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
        ,scrollwheel: false
        ,styles: [{featureType: "all", stylers: [{hue: "#F1F7FB"},{saturation: -10},{lightness: 0}]}]
        ,panControl:false
        ,mapTypeControl:false
        ,scaleControl:false
        ,streetViewControl:false
        ,overviewMapControl:false
        ,zoomControl:true
        ,zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
            ,position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
        ,center: { lat: 45.462436, lng: 9.194269}
        ,zoom: 4
    };
}
myMap.prototype = {
    addMap: function(id) {
        var node=document.getElementById(id);
        new google.maps.Map(node,this.options);
    }
    ,add: function(id){
        google.maps.event.addDomListener(window, 'load', this.addMap(id));
    }
};

Add new "instance of my object myMap" and add the maps.

var m = new myMap();
m.add('map-2');
m.add('map-3');

Live example

id="map-2" style="width:100%;height:150px;"

id="map-3" style="width:50%;height:200px;"

Responsive Google Map maps with Google Maps JavaScript API

Google Map maps width sized in percentage doesn't recenter automatically on resize. You must add the javascript that register the new maps and use the window resize Google Map event.

function myResponsiveMap() {
  this.options = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
        ,scrollwheel: false
        ,styles: [{featureType: "all", stylers: [{hue: "#F1F7FB"},{saturation: -10},{lightness: 0}]}]
        ,panControl:false
        ,mapTypeControl:false
        ,scaleControl:false
        ,streetViewControl:false
        ,overviewMapControl:false
        ,zoomControl:true
        ,zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
            ,position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
        ,center: { lat: 45.462436, lng: 9.194269}
        ,zoom: 4
  };
}

myResponsiveMap.prototype = {
    addMap: function(id) {
        var node=document.getElementById(id);             
        maps.push({"id":id,"map":new google.maps.Map(node,this.options)});               
    }    
    ,add: function(id){
        google.maps.event.addDomListener(window, 'load', this.addMap(id));              
    }    
};

var maps=new Array();
google.maps.event.addDomListener(window, "resize", function(){          
    for(var i=0;i<maps.length;i++)
    {          
        var center = maps[i].map.getCenter();                
        google.maps.event.trigger(maps[i].map, "resize");
        maps[i].map.setCenter(center);
    }            
}); 
var m = new myResponsiveMap();
m.add('map-4');
m.add('map-5');

Live example

id="map-4" style="width:80%;height:100px;"

id="map-5" style="width:90%;height:150px;"

Responsive Google Map maps with proportional resize

Maybe you want mantain the original proportions of the maps...

function myProportionalResponsiveMap() {
  this.options = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
        ,scrollwheel: false
        ,styles: [{featureType: "all", stylers: [{hue: "#F1F7FB"},{saturation: -10},{lightness: 0}]}]
        ,panControl:false
        ,mapTypeControl:false
        ,scaleControl:false
        ,streetViewControl:false
        ,overviewMapControl:false
        ,zoomControl:true
        ,zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
            ,position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
        ,center: { lat: 45.462436, lng: 9.194269}
        ,zoom: 4
  };
}

myProportionalResponsiveMap.prototype = {
    addMap: function(id) {
        var node=document.getElementById(id);             
        mapsPro.push({"id":id,"map":new google.maps.Map(node,this.options),"proportion":(node.offsetWidth/node.offsetHeight)});               
    }    
    ,add: function(id){
        google.maps.event.addDomListener(window, 'load', this.addMap(id));              
    }    
};

var mapsPro=new Array();
google.maps.event.addDomListener(window, "resize", function(){        
    for(var i=0;i<mapsPro.length;i++)
    {
        var center = mapsPro[i].map.getCenter();
        var el=document.getElementById(mapsPro[i].id);
        el.style.height = parseInt((el.offsetWidth/mapsPro[i].proportion),10)+"px";                
        google.maps.event.trigger(mapsPro[i].map, "resize");
        mapsPro[i].map.setCenter(center);

    }            
}); 
var m = new myProportionalResponsiveMap();
m.add('map-6');
m.add('map-7');

Live example

id="map-6" style="width:80%;height:100px;"

id="map-7" style="width:90%;height:150px;"