Jump to content

How can I change the look of Google maps?

Recommended Posts

  • 2 weeks later...
  • Replies 14
  • Created
  • Last Reply
  • 5 months later...
  • 1 year later...

Inspired by the answer to another map related question....

If you just want to change to one of the standard Google Maps styles, add the following code to Settings - Code Injection - Footer:

<script>  Y.on('domready', function() {    Y.all('.page-map').each(function(el) {      if (el._node.__map) {        el._node.__map.setMapTypeId(google.maps.MapTypeId.ROADMAP);      }    });  });</script>

Acceptable values are: ROADMAP, SATELLITE, HYBRID, or TERRAIN

Note, this will introduce a slight "flash" in the page as the default black and white map will still load before being replaced by the map type you selected. So it's still a bit of a hack.

Link to comment
  • 1 month later...
  • 8 months later...
Guest randybruder

I was interested in styling the built in Google Map a little better. I wrote this code which worked well for me:


function checkForMap() { return Y.one(".map-block"); }
function mapRendered() { return Y.one(".page-map"); }

if (checkForMap()) {

   var mapSetOptions = setInterval(function(){
       console.log("Waiting for map to be rendered (Runs 10 times a second until map is rendered.)");
     if (mapRendered()) {
        Y.all('.page-map').each(function(el) {
            if (el._node.__map) {
                el._node.__map.setOptions({
                  styles: styles,
                  zoom: 14
                  });
            }
            if (el._node.__marker) {
                el._node.__marker.setOptions({
                  icon: {
                    url: "/assets/pin.png",
                    size: new google.maps.Size(96, 122),
                    scaledSize: new google.maps.Size(48, 61),
                    anchor: new google.maps.Point(24, 61)
                  }
                });
            }
        });
       clearInterval(mapSetOptions);
     }
   }, 100);
}

Let me walk through what is happening here. The first two functions checkForMap() and mapRendered() are utility functions. The way Squarespace renders a Google Map, it first creates a div with the class map-block and later, using JavaScript renders a map into that div, adding the class page-map. So the first function checks to see if the page has a map in it, and the second function checks to see if the map has been rendered yet.

I’m using this approach, rather than areichman’s Y.on('domready') approach, because I found sometimes that the page would actually be 'domready' before Squarespace had finished rendering the map, so the changes to the map wouldn’t be applied typically.

So, the main code checks if there is a map element on the page. If so, it will check 10 times a second to see if the map has been rendered (done with setInterval). Once rendered, I use the standard Google Maps API setOptions function to apply new styles and a zoom level.

The “styles” is a JavaScript Style Array defined elsewhere. I used the site Snazzy Maps to generate the Style Array, as their visual interface made it particularly easy to create. You’re able to set colors for every map element individually, and turn any element on or off. I also include another function to replace the marker pin with my own .png in my assets folder.

Then I use a clearInterval to stop the setInterval once the Google Maps options have been set, because I don’t want the script to be constantly checking to see if the map has been rendered.

Ultimately, I have full control over the map, making it styled to fit in with the rest of the site’s design. Also, I’ve found that there is no flash in the page while loading, it seems to load directly into my custom style.

alt text

Link to comment
  • 5 months later...

This either is no longer working or doesn't work with marquee.

Marketing Manager for Panther Industries, Inc. Manufacturing labeling systems is our core business. It is not a means for us to simply sell more labels, ribbons, service or parts. Many people say it, but check our references. We are customer driven and we promise 100% satisfaction! That means we aren’t satisfied until you are satisfied. We offer 24/7/364 phone support at NO CHARGE. When you call our service department, you will get a live person who is knowledgeable in the service and repair of everything we manufacture.

Link to comment
Guest randybruder

@Tails4u2nv

Hey, so this only works with the Developer platform, so hopefully you're on that.

So you're loading a Javascipt file on your site. Take the code I supplied in my previous post and include that. And somewhere before that, define "styles" as an array supplied by Snazzymaps. For example, the array I used in the screenshot:


var styles = [
{
   "featureType": "all",
   "elementType": "geometry.fill",
   "stylers": [
       {
           "visibility": "on"
/* And so on... I'm not going to post the
  entire array, it's 238 lines of code. */

Link to comment
  • 5 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.