Hello,

I am trying to style google map:

like: http://www.akronyms.net/demo/arvin-html/v_1.5/

How?

Here is a references: https://developers.google.com/maps/documentation/javascript/styling

What I do not understand is to create a grey map I should include the following array variable:

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

My question is where to include that array variable? I already try it and it does not work.

Recommended Answers

All 12 Replies

Hi, the overview explains that there are two methods to load these styles.

In the first case you can change the default style by assigning the array to the MapOptions object:

map.setOptions({styles: styleArray});

Documentation for the first method:

The second method uses the StyledMapType class and requires few steps:

var styledMap = new google.maps.StyledMapType(styleArray,
{name: "Styled Map"});
...
map.mapTypes.set('map_style', styledMap);

Documentation for the second method:

Bye!

Hello,

I am trying to understand how to create grey styling map. Just like the link above. but I do not know how to. Evenif I already read the documentation. This is my code so far:

Can anyone help me fix or write the code for me?

contact.php

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>

   <meta charset="utf-8">        

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<?php include('nav.php'); ?>


<br><br><br>

<?php

map.setOptions({styles: styleArray});

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

?>

<div id="bounce"> 
<!-- <img src="Images/Contact/map.jpg"> -->
   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97183.46594409156!2d-79.98050049999999!3d40.431368449999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f16f48068503%3A0x8df915a15aa21b34!2sPittsburgh%2C+PA%2C+USA!5e0!3m2!1sen!2sid!4v1438937398399" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

<div id="row">
<div class="col-sm-6">

   <div style="margin-left: 70px;">
   <br><br>
   <div id="bounce"><b>CONTACT US</b><br><br>

   <div style="margin-left: -50px;"><hr width="900"></div>
   <br><br>

      <div style="text-align: left;">

      Nama:<br><input type="text" name="nama"><br>
      How do you hear about us?<br><input type="text" name="nama"><br>
      Message:<br><textarea rows="5" cols="15"></textarea>
      <br><br>

   <button id="btn" type="button">Send</button> 

   </div>

   </div>
   </div>   

</div>


<div class="col-sm-6">   
   <div style="margin-top: 180px; width: 350px; padding: 50px;">

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

   </div>
</div>

</div>

<div style="margin-top: 500px;">

<?php include('footer.php'); ?>

</div>


</body>
</html> 

Here is my other code if you can help me fix it. Maybe it's better than the previous one. The result is the map is still not grey yet.

map3.php

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
<script>

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];


</script>

<script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

</script>

    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

Hi,

you have defined the init function and the array, but you are not applying the array to the map, so change this:

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

To:

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  map.setOptions({styles: styleArray});
}

And it should work.

Thanks. The grey map works well now.

Now, I am trying to apply similar case on this map.

Yet, the grey color has not apply correctly on the map. Can anyone help me fix the code?

Thanks in advance.

contact.php

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>

   <meta charset="utf-8">        

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

<script>

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];


</script>

</head>

<body>

<?php include('nav.php'); ?>


<br><br><br>

<script>

var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
      map.setOptions({styles: styleArray});
    }

</script>

<div id="bounce"> 
<!-- <img src="Images/Contact/map.jpg"> -->

   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97183.46594409156!2d-79.98050049999999!3d40.431368449999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f16f48068503%3A0x8df915a15aa21b34!2sPittsburgh%2C+PA%2C+USA!5e0!3m2!1sen!2sid!4v1438937398399" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

<div id="row">
<div class="col-sm-6">

   <div style="margin-left: 70px;">
   <br><br>
   <div id="bounce"><b>CONTACT US</b><br><br>

   <div style="margin-left: -50px;"><hr width="900"></div>
   <br><br>

      <div style="text-align: left;">

      Nama:<br><input type="text" name="nama"><br>
      How do you hear about us?<br><input type="text" name="nama"><br>
      Message:<br><textarea rows="5" cols="15"></textarea>
      <br><br>

   <button id="btn" type="button">Send</button> 

   </div>

   </div>
   </div>   

</div>


<div class="col-sm-6">   
   <div style="margin-top: 180px; width: 350px; padding: 50px;">

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

   </div>
</div>

</div>

<div style="margin-top: 500px;">

<?php include('footer.php'); ?>

</div>


</body>
</html> 

It does not work because you are trying to style an external link loaded by the iframe tag.

So, remove this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97183.46594409156!2d-79.98050049999999!3d40.431368449999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f16f48068503%3A0x8df915a15aa21b34!2sPittsburgh%2C+PA%2C+USA!5e0!3m2!1sen!2sid!4v1438937398399" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Replace it with:

<div id="map"></div>

And apply CSS rules to #map, from there you can define the size of the map, for example:

#map {
    height:450px;
    width:1000px;
}

Hello,

I try that and the map does not appears yet. I wonder why?

contact.php

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>

   <meta charset="utf-8">        

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

<script>

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];


</script>

</head>

<body>

<?php include('nav.php'); ?>


<br><br><br>

<script>

var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
      map.setOptions({styles: styleArray});
    }

</script>

<div id="bounce"> 
<!-- <img src="Images/Contact/map.jpg"> -->

<!--
   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97183.46594409156!2d-79.98050049999999!3d40.431368449999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f16f48068503%3A0x8df915a15aa21b34!2sPittsburgh%2C+PA%2C+USA!5e0!3m2!1sen!2sid!4v1438937398399" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-->

<div id="map"></div>

</div>

<div id="row">
<div class="col-sm-6">

   <div style="margin-left: 70px;">
   <br><br>
   <div id="bounce"><b>CONTACT US</b><br><br>

   <div style="margin-left: -50px;"><hr width="900"></div>
   <br><br>

      <div style="text-align: left;">

      Nama:<br><input type="text" name="nama"><br>
      How do you hear about us?<br><input type="text" name="nama"><br>
      Message:<br><textarea rows="5" cols="15"></textarea>
      <br><br>

   <button id="btn" type="button">Send</button> 

   </div>

   </div>
   </div>   

</div>


<div class="col-sm-6">   
   <div style="margin-top: 180px; width: 350px; padding: 50px;">

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

   </div>
</div>

</div>

<div style="margin-top: 500px;">

<?php include('footer.php'); ?>

</div>


</body>
</html> 

style.css

#map {
      height:450px;
      width:1000px;
    }

Thanks. Now it almost works. I am trying to make the map adjustable to the screen size with bootstrap and I am still wonder why the map is still fix in size not liquid as I expected.

contact.php

<div class="row">
    <div class="col-xs-12 col-sm-12">
    <div id="map"></div>
    </div>
</div>

Add this line after the init function:

google.maps.event.trigger(map, 'resize');

Then change the #map width to 100% and the height according to the resolution, in this case you can use media queries, for example:

@media (max-width: 599px) {
    #map {
        height: 350px;
        width: 100%;
    }
}

@media (min-width: 600px) {
    #map {
        height: 450px;
        width: 100%;
    }
}

Reference:

I try that and the map has not change yet. It still not adjustable with the screen resolution.

contact.php

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>

   <meta charset="utf-8">        

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

<script>

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];


</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

</head>

<body>

<?php include('nav.php'); ?>


<br><br><br>

<script>

var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
      map.setOptions({styles: styleArray});
    }

    google.maps.event.trigger(map, 'resize');

</script>

<div id="bounce"> 
<!-- <img src="Images/Contact/map.jpg"> -->

<!--
   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97183.46594409156!2d-79.98050049999999!3d40.431368449999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f16f48068503%3A0x8df915a15aa21b34!2sPittsburgh%2C+PA%2C+USA!5e0!3m2!1sen!2sid!4v1438937398399" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-->

<div class="row">
    <div class="col-sm-12 col-xs-12">
    <!-- <img src="Images/Contact/map.jpg"> -->
    <div id="map"></div> 
    </div>
</div>

</div>

<div id="row">
<div class="col-sm-6">

   <div style="margin-left: 70px;">
   <br><br>
   <div id="bounce"><b>CONTACT US</b><br><br>

   <div style="margin-left: -50px;"><hr width="900"></div>
   <br><br>

      <div style="text-align: left;">

      Nama:<br><input type="text" name="nama"><br>
      How do you hear about us?<br><input type="text" name="nama"><br>
      Message:<br><textarea rows="5" cols="15"></textarea>
      <br><br>

   <button id="btn" type="button">Send</button> 

   </div>

   </div>
   </div>   

</div>


<div class="col-sm-6">   
   <div style="margin-top: 180px; width: 350px; padding: 50px;">

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

   </div>
</div>

</div>

<div style="margin-top: 500px;">

<?php include('footer.php'); ?>

</div>


</body>
</html> 

I don't know, this is my test, based on your code:

click on Run to execute the page. It seems to resizes fine for me, but I'm not testing IE right now, so I'm not sure I suggested you something wrong. The only differences are:

  1. I'm loading Bootstrap and JQuery from CDN
  2. I'm not loading custom styles
  3. I replaced navigation and footer with simple divs

So it could be a broken end tag or something else. If it still does not help wait for other suggestions.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.