Styling Google Map

Question

davy_yg 2 Posting Whiz

9 Years Ago

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.

php seo

2 Contributors
12 Replies
610 Views
3 Weeks Discussion Span
Latest Post 9 Years Ago Latest Post by cereal

cereal 1,524 Nearly a Senior Poster

9 Years Ago

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!

cereal 1,524 Nearly a Senior Poster

9 Years 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: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  map.setOptions({styles: styleArray});
}

And it should work.

cereal 1,524 Nearly a Senior Poster

9 Years 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 example:

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

Reply to this topic

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.

davy_yg 2 Posting Whiz · Answer 1 · 2015-08-28T08:10:00+00:00

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>

davy_yg 2 Posting Whiz · Answer 2 · 2015-08-28T09:48:15+00:00

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>

davy_yg 2 Posting Whiz · Answer 3 · 2015-08-29T05:30:33+00:00

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>

davy_yg 2 Posting Whiz · Answer 4 · 2015-08-31T04:36:35+00:00

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

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 5 · 2015-08-31T10:12:17+00:00

I don't know the contents of the included files, but have you included the link to the API?

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

davy_yg 2 Posting Whiz · Answer 6 · 2015-08-31T11:13:48+00:00

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>

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 7 · 2015-08-31T13:03:04+00:00

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:

resize event: https://developers.google.com/maps/documentation/javascript/reference?hl=en#events

davy_yg 2 Posting Whiz · Answer 8 · 2015-08-31T14:09:04+00:00

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>

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 9 · 2015-08-31T15:08:41+00:00

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

http://code.runnable.com/VeRru9qydx0wYwpW/testing-resizable-google-maps-for-php

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:

I'm loading Bootstrap and JQuery from CDN
I'm not loading custom styles
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.