I've tried to edit the existing Map module's styles to get another Map theme instead of the default one, but Divi doesn't seem to offer that feature.
Example of the mentioned styles:
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12,
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#8754c4"
}]
}, {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
}, {
"lightness": 20
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
}, {
"lightness": -33
}, {
"weight": 2
}, {
"gamma": 0.8
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
}, {
"saturation": 30
}]
}, {
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8945c7"
}]
}, {
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
}, {
"saturation": -20
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
}, {
"saturation": -30
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
}, {
"lightness": 25
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}, {
"color": "#ff0000"
}]
}, {
"featureType": "transit",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": -20
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#7950a9"
}]
}]
How would I go about applying these styles to the existing Map module? Is there an external plugin for this feature?
https://elegantmarketplace.com/downloads/divi-map-extended-module/
This paid module adds these features, but I'm wondering if there's another way to go about it.
you can add your custom style in this file:
/wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js
Line 2405, replace this:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [ {
stylers: [
{ saturation: parseInt( this_map_grayscale ) }
]
} ]
}));
with this:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#8754c4"
}]
}, {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
}, {
"lightness": 20
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
}, {
"lightness": -33
}, {
"weight": 2
}, {
"gamma": 0.8
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
}, {
"saturation": 30
}]
}, {
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8945c7"
}]
}, {
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
}, {
"saturation": -20
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
}, {
"saturation": -30
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
}, {
"lightness": 25
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}, {
"color": "#ff0000"
}]
}, {
"featureType": "transit",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": -20
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#7950a9"
}]
}]
}));
it dosent work to me so far, now that piece of code is in the 2499 line and looks like this:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [ {
stylers: [
{ saturation: parseInt( this_map_grayscale ) }
]
} ]
}));
and the style I'm trying to set up is this:
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#313131"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d900d9"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#181818"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a71089"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#600659"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#373737"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#af1498"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#f5a9ea"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#3c3c3c"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e72ecb"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#4e4e4e"
}
]
},
{
"featureType": "transit",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f5a9ea"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
]
how should I do it?
You can try the plugin Snazzy Map for colormap in divi,its easy to handle
Plugin LINK
You can also visit the main site Snazzy map
If you use this plugin , then it dose not overwrite with theme update. Thanks
Related
We are using this plugin https://wordpress.org/plugins/map-multi-marker/ for the map on our Wordpress website. But we want to change the color of the map similar on this https://mapstyle.withgoogle.com - the Silver color. We tried pasting the styles on the raw js of the page but it's not working. Any help is very much appreciated.
Copy the JSON you get from the style created with the Styling Wizard, e.g. the silver look you want:
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
Then insert it into your map's styles property. Check out this working jsfiddle for demonstration and guidance.
Hope this helps!
I used this google maps javascript options to style maps
var Map = new google.maps.Map(document.getElementById(canvasID), {
center: {
lat: 58.913528,
lng: 25.670033
},
zoom: 14,
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
rotateControl: true,
fullscreenControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "poi",
stylers: [
{visibility: "off"}
]
},
{
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ff7c17"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#17263c"
}
]
}
]
});
In styled maps google maps don't style landscape.man_made outside US cities.
Screenshot of random place in Kansas City,US.
If i navigate my self to random place in Tallinn,Estonia.
Then buildings are no more outlined.
In this google maps night mode example https://developers.google.com/maps/documentation/javascript/styling buildings are not outline at all.
i am not sure if this is possible, but i would like to add a semi transparent layer over a map. Then place text over the layer. I have tried the following, but the layer is behind the map instead of over it and so is the text, how do i get around this?
/*GOOGLE MAPS*/
section#map {
width: 100%;
height: 250px;
}
/*layers*/
.layer {
background-color: black;
opacity: 0.5;
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
/*netscape*/
filter: alpha(opacity=50);
/*IE*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE 8*/
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id='map'>
<div class="layer">
<h3 id="area">Restaurants delivering to</h3>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{
"featureType": "all",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
<!-- FLAT DESIGN MAP -->
</section>
</div>
Only the map shows and nothing else in the browser. But i want it to look like this.
If you give your main section position relative like below, you can then give your layer position absolute including top and left values, as seen below, also as opposed to reducing the opacity of the layer just use an rgba value in your background-color instead:
** Also I would move the h3 out of the map section and put it above.
/*GOOGLE MAPS*/
section#map {
width: 100%;
height: 250px;
position:relative;
margin:auto;
}
/*layers*/
.layer {
background-color: rgba(0,0,0,0.5);
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h3 {
width:100%;
position:relative;
z-index:999;
}
<section id='map'>
<div class="layer">
<h3 id="area">Restaurants delivering to</h3>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{
"featureType": "all",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
<!-- FLAT DESIGN MAP -->
</section>
</div>
Been on this for a while now, I need to make the map height 100% of its container. And also keep it centred when its resizing.
I have tried nearly all of the examples on here with no avail..
The code example below shows what I am using, there's markers and infowindows in there and also custom marker symbols too. I don't get any errors in the console.
<script type="text/javascript">
var markers = [
{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/>View more info',
"type": 'Swiss Boarding School'
},
{
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}
];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://fokn.temp-dns.com/images/site/icon-" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<div style="width:100%; height:100%;">
<div id="dvMap" style="width:100%; height:100%;"></div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap"></script>
You need to give sizes to all the elements up to the <html> element:
html, body, #dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
Mike Williams' Google Maps Javascript API v2 page on this subject: Using a percentage height for the map div
proof of concept fiddle
code snippet:
var markers = [{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/>View more info',
"type": 'Swiss Boarding School'
}, {
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "landscape",
"stylers": [{
"saturation": -100
}, {
"lightness": 65
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"stylers": [{
"saturation": -100
}, {
"lightness": 51
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"saturation": -100
}, {
"lightness": 30
}, {
"visibility": "on"
}]
}, {
"featureType": "road.local",
"stylers": [{
"saturation": -100
}, {
"lightness": 40
}, {
"visibility": "on"
}]
}, {
"featureType": "transit",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": -25
}, {
"saturation": -100
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"hue": "#ffff00"
}, {
"lightness": -25
}, {
"saturation": -97
}]
}]
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function() {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: icon
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="width:100%; height:100%;">
<div id="dvMap"></div>
</div>
I am having a little trouble with implementing the Google Maps APi styled map, I can get the location and custom marker working, by removing the var styles & map.setoptions) but soon as I try to add the google styles coding back in the map no longer works, any ideas??
<script type="text/javascript">
function initialize() {
var styles = [
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ color: "#73b6e6" }
]
},{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{ color: "#c8c8c8" }
]
},{
featureType: "road.local",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [
{ color: "#c8c8c8" }
]
},{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [ { visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [ { "visibility": "off" }
]
},{
featureType: "poi.park",
stylers: [ { color: "#cae6a9" }
]
},{
featureType: "administrative.neighborhood",
elementType: "labels.text.fill",
stylers: [ { "visibility": "off" }
]
}
];
map.setOptions({styles: styles});
var mapOptions = {
center: new google.maps.LatLng(-34.94533,138.58934),
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);
var image = 'images/main/location.png';
var myLatLng = new google.maps.LatLng(-34.94533,138.58934);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
};
</script>
HTML Code
<div id="location-map" style="background-color: #E5E3DF; overflow: hidden;">
</div>
the map var does not exist before you create, yet you are calling map.setOptions before this line:
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);
Just move this line:
map.setOptions({styles: styles});
after this one:
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);