Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 10
Sign in to follow this  
Alan-Squareflair

How can I change the look of Google maps?

Question

14 answers to this question

Recommended Posts

  • 6

The default Map Block inserts a black and white map. There are no color options initially. However, all you need to do is use a Code Block instead and you can insert a map embed from any other map service in full color.


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 3

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.

Edited by areichman
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.

Share this post


Link to post
  • 2

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

Edited by randybruder
Tidy, fix link

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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. */

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...