0

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.

2
Contributors
12
Replies
71
Views
2 Years
Discussion Span
Last Post by cereal
Featured Replies
  • 1
    cereal 1,419   1 Year Ago

    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: … Read More

  • 1
    cereal 1,419   1 Year Ago

    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 … Read More

0

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!

0

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> 
0

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>
1

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.

0

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> 
1

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;
}
0

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;
    }
0

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>
0

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> 
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.