CSS- semi-transparent layer over map not working - css

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>

Related

How to change the color of Google Map from Wordpress Plugin?

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!

Google maps javascript won't style buildings outside US

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.

Divi - custom Map module

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

Multiple polyline to a marker on Google maps api v3

I am trying to direct multiple polylines to a particular marker in a map.
I am able to draw the polylines to the marker but when I try to animate the same only the last polyline is working. The link below shows the map I made.
http://jsbin.com/ihugur/1/edit
Also this is the code:
<html>
<head>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script language="javascript">
var line;
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
function initialize(){
var styles = [
{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#C0C0C0" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#FFFFFF" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "off" },
{ "color": "#efffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
}
];
var symbolOne = {
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom:2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false,
styles: styles
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
for(i=0;i<lineCoordinates.length;i++){
markers.push(new google.maps.Marker({
position: lineCoordinates[i],
map: map,
}));
line = new google.maps.Polyline({
path: [lineCoordinates[i], domain[0]],
strokeOpacity: 0.8,
strokeWeight:2,
strokeColor: '#f00',
geodesic: true,
icons: [{
icon: lineSymbol,
offset: '100%',
repeat: '30px'
}]
});
line.setMap(map);
} //end of for loop
animate();
} //end of initialize function
function animate(){
var count = 0;
offsetId = window.setInterval(function(){
count = (count + 1) % 2000;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 200);
}// end of animate function
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>
</select>
</body>
</html>
Could anyone help me fixing this problem.
Thanks in advance.

Make an array to hold all your polylines:
var lines = [];
push your existing line(s) on that array:
lines.push(line);
Process through them updating the icons.
function animate(){
var count = 0;
offsetId = window.setInterval(function(){
count = (count + 1) % 2000;
for (var i=0; i<lines.length; i++) {
var icons = lines[i].get('icons');
icons[0].offset = (count / 2) + '%';
lines[i].set('icons', icons);
}
}, 200);
}// end of animate function
example
code snippet:
var line;
var lines = [];
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
function initialize() {
var styles = [{
"featureType": "administrative.country",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#C0C0C0"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#FFFFFF"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}, {
"color": "#efffff"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}];
var symbolOne = {
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom: 1,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false,
styles: styles
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
for (i = 0; i < lineCoordinates.length; i++) {
markers.push(new google.maps.Marker({
position: lineCoordinates[i],
map: map
}));
line = new google.maps.Polyline({
path: [lineCoordinates[i], domain[0]],
strokeOpacity: 0.8,
strokeWeight: 2,
strokeColor: '#f00',
geodesic: true,
icons: [{
icon: lineSymbol,
offset: '100%',
repeat: '30px'
}]
});
line.setMap(map);
lines.push(line);
} //end of for loop
// alert(lines.length);
animate();
} //end of initialize function
function animate() {
var count = 0;
offsetId = window.setInterval(function() {
count = (count + 1) % 2000;
for (var i = 0; i < lines.length; i++) {
var icons = lines[i].get('icons');
icons[0].offset = (count / 2) + '%';
lines[i].set('icons', icons);
}
}, 200);
} // end of animate function
google.maps.event.addDomListener(window, 'load', initialize);
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100% margin: 0;
padding: 0
}
#map_canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 100%; "></div>

Google Maps Api V3 Styled Map

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);

Resources