Google Map Shortcode

Avada has integration for Google Maps. We have a dedicated contact page template with map integration that allows you to set many different map options via our theme options panel. In addition, we have a google map shortcode that can be used on any page or post, or widget section. We include intuitive options that allow you to use the default google map styles, or customize the options to fit your branding style. Avada also lets you select multiple map locations on a single map, each with its own content. Select 4 map types, display a color overlay, upload a custom map marker, customize the map popup box along with many other unique options.

Avada’s Google Map Integration Is Incredibly Cool

Choose From Four Different Google Map Types

var map_fusion_map_59cd4e32a547b;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32a547b() {
var location = new google.maps.LatLng(40.7127837, -74.0059413);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
scaleControl: true,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32a547b = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32a547b”), map_options);

var content_string = “

new york city, ny

“;

map_fusion_map_59cd4e32a547b_args = {
position: new google.maps.LatLng(“40.7127837”, “-74.0059413”),
map: map_fusion_map_59cd4e32a547b };

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32a547b_args);

markers[counter][‘infowindow’] = new google.maps.InfoWindow({
content: content_string
});

google.maps.event.addListener(markers[counter], ‘click’, function() {
if(this[‘infowindow’].show) {
this[‘infowindow’].close(map_fusion_map_59cd4e32a547b, this);
this[‘infowindow’].show = false;
} else {
this[‘infowindow’].open(map_fusion_map_59cd4e32a547b, this);
this[‘infowindow’].show = true;
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32a547b);

Google Map Roadmap

var map_fusion_map_59cd4e32a8999;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32a8999() {
var location = new google.maps.LatLng(40.7127837, -74.0059413);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true,
scaleControl: true,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32a8999 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32a8999”), map_options);

var content_string = “

new york city, ny

“;

map_fusion_map_59cd4e32a8999_args = {
position: new google.maps.LatLng(“40.7127837”, “-74.0059413”),
map: map_fusion_map_59cd4e32a8999 };

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32a8999_args);

markers[counter][‘infowindow’] = new google.maps.InfoWindow({
content: content_string
});

google.maps.event.addListener(markers[counter], ‘click’, function() {
if(this[‘infowindow’].show) {
this[‘infowindow’].close(map_fusion_map_59cd4e32a8999, this);
this[‘infowindow’].show = false;
} else {
this[‘infowindow’].open(map_fusion_map_59cd4e32a8999, this);
this[‘infowindow’].show = true;
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32a8999);

Google Map Satellite

var map_fusion_map_59cd4e32abdd2;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32abdd2() {
var location = new google.maps.LatLng(40.7127837, -74.0059413);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true,
scaleControl: true,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32abdd2 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32abdd2”), map_options);

var content_string = “

new york city, ny

“;

map_fusion_map_59cd4e32abdd2_args = {
position: new google.maps.LatLng(“40.7127837”, “-74.0059413”),
map: map_fusion_map_59cd4e32abdd2 };

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32abdd2_args);

markers[counter][‘infowindow’] = new google.maps.InfoWindow({
content: content_string
});

google.maps.event.addListener(markers[counter], ‘click’, function() {
if(this[‘infowindow’].show) {
this[‘infowindow’].close(map_fusion_map_59cd4e32abdd2, this);
this[‘infowindow’].show = false;
} else {
this[‘infowindow’].open(map_fusion_map_59cd4e32abdd2, this);
this[‘infowindow’].show = true;
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32abdd2);

Google Map Hybrid

var map_fusion_map_59cd4e32aef36;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32aef36() {
var location = new google.maps.LatLng(40.7127837, -74.0059413);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.TERRAIN,
scrollwheel: true,
scaleControl: true,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32aef36 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32aef36”), map_options);

var content_string = “

new york city, ny

“;

map_fusion_map_59cd4e32aef36_args = {
position: new google.maps.LatLng(“40.7127837”, “-74.0059413”),
map: map_fusion_map_59cd4e32aef36 };

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32aef36_args);

markers[counter][‘infowindow’] = new google.maps.InfoWindow({
content: content_string
});

google.maps.event.addListener(markers[counter], ‘click’, function() {
if(this[‘infowindow’].show) {
this[‘infowindow’].close(map_fusion_map_59cd4e32aef36, this);
this[‘infowindow’].show = false;
} else {
this[‘infowindow’].open(map_fusion_map_59cd4e32aef36, this);
this[‘infowindow’].show = true;
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32aef36);

Google Map Terrain

Easily .popover-2.top .arrow{border-top-color:;}.popover-2{border-color:;}.popover-2 .popover-title{background-color:;color:;border-color:;}.popover-2 .popover-content{background-color:;color:;}.popover-2.top .arrow:after{border-top-color:;}Customize Map Styles, Info Box Colors & Content!

var map_fusion_map_59cd4e32b3d99;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32b3d99() {
var location = new google.maps.LatLng(40.8621792, -73.88601);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.TERRAIN,
scrollwheel: false,
scaleControl: false,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32b3d99 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32b3d99”), map_options);

var content_string = “

New York City, NY 10458

“;

map_fusion_map_59cd4e32b3d99_args = {
position: new google.maps.LatLng(“40.8621792”, “-73.88601”),
map: map_fusion_map_59cd4e32b3d99 };

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32b3d99_args);

markers[counter][‘infowindow’] = new google.maps.InfoWindow({
content: content_string
});

markers[counter][‘infowindow’].show = true;
markers[counter][‘infowindow’].open(map_fusion_map_59cd4e32b3d99, markers[counter]);

google.maps.event.addListener(markers[counter], ‘click’, function() {
if(this[‘infowindow’].show) {
this[‘infowindow’].close(map_fusion_map_59cd4e32b3d99, this);
this[‘infowindow’].show = false;
} else {
this[‘infowindow’].open(map_fusion_map_59cd4e32b3d99, this);
this[‘infowindow’].show = true;
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32b3d99);

Default Google Styling

The default map style gives you the exact styling that comes from Google Maps. This includes all the map coloring, the info box styles and map marker. This is the classic Google Maps styling!

var map_fusion_map_59cd4e32b72f1;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32b72f1() {
var location = new google.maps.LatLng(40.8621792, -73.88601);
var map_options = {
zoom: 7,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
scaleControl: false,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32b72f1 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32b72f1”), map_options);

var content_string = “

New York City, NY 10458

“;

map_fusion_map_59cd4e32b72f1_args = {
position: new google.maps.LatLng(“40.8621792”, “-73.88601”),
map: map_fusion_map_59cd4e32b72f1 };

map_fusion_map_59cd4e32b72f1_args.animation = google.maps.Animation.DROP;
map_fusion_map_59cd4e32b72f1_args.icon = new google.maps.MarkerImage( ‘https://web.archive.org/web/20170928193203/http://sundarban.tours/wp-content/plugins/fusion-core/images/avada_map_marker.png’, null, null, null, new google.maps.Size( 37, 55 ) );

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32b72f1_args);

var info_box_div = document.createElement(‘div’);
info_box_div.className = ‘fusion-info-box’;
info_box_div.style.cssText = ‘background-color:rgba(0, 0, 0, 0.8);color:#fff;’;

info_box_div.innerHTML = content_string;

var info_box_options = {
content: info_box_div
,disableAutoPan: false
,maxWidth: 150
,pixelOffset: new google.maps.Size(-125, 10)
,zIndex: null
,boxStyle: {
background: ‘none’
,opacity: 1
,width: “250px”
}
,closeBoxMargin: “2px 2px 2px 2px”
,closeBoxURL: “https://web.archive.org/web/20170928193203/http://www.google.com/intl/en_us/mapfiles/close.gif”
,infoBoxClearance: new google.maps.Size(1, 1)

};

markers[counter][‘infowindow’] = new InfoBox(info_box_options);
markers[counter][‘infowindow’].open(map_fusion_map_59cd4e32b72f1, markers[counter]);
markers[counter][‘infowindow’].setVisible( false );
google.maps.event.addListener(markers[counter], ‘click’, function() {
if( this[‘infowindow’].getVisible() ) {
this[‘infowindow’].setVisible( false );
} else {
this[‘infowindow’].setVisible( true );
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32b72f1);

Theme Map Styling

We have added a custom theme styling that is unique to the Avada theme. When using this styling, the map color overlay, map marker and info box will be automatically set with our unique settings!

var map_fusion_map_59cd4e32ba76b;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32ba76b() {
var location = new google.maps.LatLng(40.8621792, -73.88601);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
scaleControl: false,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32ba76b = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32ba76b”), map_options);

var content_string = “

John Doe Is At New York City Office! Stop Bye Today For A Free Estimation! 2511 W. Street, New York, NY 10458

“;

var styles = [
{
stylers: [
{ hue: ‘#5f96c9’ },
{ saturation: ‘0’ },
{ lightness: ’16’ }
]
},{
featureType: “road”,
elementType: “geometry”,
stylers: [
{ visibility: “simplified” }
]
},{
featureType: “road”,
elementType: “labels”,
}
];

map_fusion_map_59cd4e32ba76b.setOptions({styles: styles});

map_fusion_map_59cd4e32ba76b_args = {
position: new google.maps.LatLng(“40.8621792”, “-73.88601”),
map: map_fusion_map_59cd4e32ba76b };

map_fusion_map_59cd4e32ba76b_args.animation = google.maps.Animation.DROP;
map_fusion_map_59cd4e32ba76b_args.icon = ‘https://web.archive.org/web/20170928193203/http://theme-fusion.com/avada/wp-content/uploads/2014/06/map_avatar_2.png’;

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32ba76b_args);

var info_box_div = document.createElement(‘div’);
info_box_div.className = ‘fusion-info-box’;
info_box_div.style.cssText = ‘background-color:rgba(16,92,162,.8);color:;’;

info_box_div.innerHTML = content_string;

var info_box_options = {
content: info_box_div
,disableAutoPan: false
,maxWidth: 150
,pixelOffset: new google.maps.Size(-125, 10)
,zIndex: null
,boxStyle: {
background: ‘none’
,opacity: 1
,width: “250px”
}
,closeBoxMargin: “2px 2px 2px 2px”
,closeBoxURL: “https://web.archive.org/web/20170928193203/http://www.google.com/intl/en_us/mapfiles/close.gif”
,infoBoxClearance: new google.maps.Size(1, 1)

};

markers[counter][‘infowindow’] = new InfoBox(info_box_options);
markers[counter][‘infowindow’].open(map_fusion_map_59cd4e32ba76b, markers[counter]);
google.maps.event.addListener(markers[counter], ‘click’, function() {
if( this[‘infowindow’].getVisible() ) {
this[‘infowindow’].setVisible( false );
} else {
this[‘infowindow’].setVisible( true );
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32ba76b);

Custom Map Styling

The custom map style allows you to use any uploaded image or icon as a custom map marker. As well as any overlay color, infobox background and text color. This is perfect for branding your site!

.reading-box-container-1 .element-bottomshadow:before,.reading-box-container-1 .element-bottomshadow:after{opacity:0.1;}

Full Size Control

The Google Maps shortcode and theme option integration allows you to take full control over the width and height of the map. Use fixed widths or percentages. This comes in handy when placing maps on pages that need to fit perfectly in unique layouts.

var map_fusion_map_59cd4e32bed1f;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32bed1f() {
var location = new google.maps.LatLng(40.8621792, -73.88601);
var map_options = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.TERRAIN,
scrollwheel: false,
scaleControl: true,
panControl: false,
zoomControl: false
};
map_fusion_map_59cd4e32bed1f = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32bed1f”), map_options);

var content_string = “

New York City, NY 10458

“;

map_fusion_map_59cd4e32bed1f_args = {
position: new google.maps.LatLng(“40.8621792”, “-73.88601”),
map: map_fusion_map_59cd4e32bed1f };

map_fusion_map_59cd4e32bed1f_args.animation = google.maps.Animation.DROP;
map_fusion_map_59cd4e32bed1f_args.icon = new google.maps.MarkerImage( ‘https://web.archive.org/web/20170928193203/http://sundarban.tours/wp-content/plugins/fusion-core/images/avada_map_marker.png’, null, null, null, new google.maps.Size( 37, 55 ) );

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32bed1f_args);

var info_box_div = document.createElement(‘div’);
info_box_div.className = ‘fusion-info-box’;
info_box_div.style.cssText = ‘background-color:rgba(0, 0, 0, 0.8);color:#fff;’;

info_box_div.innerHTML = content_string;

var info_box_options = {
content: info_box_div
,disableAutoPan: false
,maxWidth: 150
,pixelOffset: new google.maps.Size(-125, 10)
,zIndex: null
,boxStyle: {
background: ‘none’
,opacity: 1
,width: “250px”
}
,closeBoxMargin: “2px 2px 2px 2px”
,closeBoxURL: “https://web.archive.org/web/20170928193203/http://www.google.com/intl/en_us/mapfiles/close.gif”
,infoBoxClearance: new google.maps.Size(1, 1)

};

markers[counter][‘infowindow’] = new InfoBox(info_box_options);
markers[counter][‘infowindow’].open(map_fusion_map_59cd4e32bed1f, markers[counter]);
markers[counter][‘infowindow’].setVisible( false );
google.maps.event.addListener(markers[counter], ‘click’, function() {
if( this[‘infowindow’].getVisible() ) {
this[‘infowindow’].setVisible( false );
} else {
this[‘infowindow’].setVisible( true );
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32bed1f);

.reading-box-container-2 .element-bottomshadow:before,.reading-box-container-2 .element-bottomshadow:after{opacity:0.1;}

Powerful Map Controls

Avada allows you to control several aspects of the map. Set the zoom level on the map, show or hide the map scale, allow the mouse scroll wheel to zoom in and out or to be disabled when used, show or hide the pan control icon and choose to show or hide hte map popup when the page loads. Amazing options at your fingertips, super powerful!

var map_fusion_map_59cd4e32c27b8;
var markers = [];
var counter = 0;
function fusion_run_map_fusion_map_59cd4e32c27b8() {
var location = new google.maps.LatLng(40.8621792, -73.88601);
var map_options = {
zoom: 2,
center: location,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false,
scaleControl: true,
panControl: true,
zoomControl: true
};
map_fusion_map_59cd4e32c27b8 = new google.maps.Map(document.getElementById(“fusion_map_59cd4e32c27b8”), map_options);

var content_string = “

Hey! I’m all the way down here!
12345 West Street, New York City, NY

“;

map_fusion_map_59cd4e32c27b8_args = {
position: new google.maps.LatLng(“40.8621792”, “-73.88601”),
map: map_fusion_map_59cd4e32c27b8 };

map_fusion_map_59cd4e32c27b8_args.animation = google.maps.Animation.DROP;
map_fusion_map_59cd4e32c27b8_args.icon = ‘https://web.archive.org/web/20170928193203/http://theme-fusion.com/avada/wp-content/uploads/2014/06/map_avatar_1.png’;

markers[counter] = new google.maps.Marker(map_fusion_map_59cd4e32c27b8_args);

var info_box_div = document.createElement(‘div’);
info_box_div.className = ‘fusion-info-box’;
info_box_div.style.cssText = ‘background-color:rgba(255,255,255,.6);color:#242424;’;

info_box_div.innerHTML = content_string;

var info_box_options = {
content: info_box_div
,disableAutoPan: false
,maxWidth: 150
,pixelOffset: new google.maps.Size(-125, 10)
,zIndex: null
,boxStyle: {
background: ‘none’
,opacity: 1
,width: “250px”
}
,closeBoxMargin: “2px 2px 2px 2px”
,closeBoxURL: “https://web.archive.org/web/20170928193203/http://www.google.com/intl/en_us/mapfiles/close.gif”
,infoBoxClearance: new google.maps.Size(1, 1)

};

markers[counter][‘infowindow’] = new InfoBox(info_box_options);
markers[counter][‘infowindow’].open(map_fusion_map_59cd4e32c27b8, markers[counter]);
google.maps.event.addListener(markers[counter], ‘click’, function() {
if( this[‘infowindow’].getVisible() ) {
this[‘infowindow’].setVisible( false );
} else {
this[‘infowindow’].setVisible( true );
}
});

counter++;

}

google.maps.event.addDomListener(window, ‘load’, fusion_run_map_fusion_map_59cd4e32c27b8);

Join The 70,000+ Satisfied Avada Users!

#wrapper .fusion-button.button-1{text-shadow:none;border-width:0px;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:0px;}#wrapper .fusion-button.button-1{background: ;}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: ;}I’M SOLD, BUY AVADA NOW!