Alan-Squareflair Posted December 4, 2012 Share Posted December 4, 2012 I'm looking for map settings to change to color maps. Link to comment
Paul1570047683 Posted December 17, 2012 Share Posted December 17, 2012 Me too. I'd like to have the satellite view showing by default if possible. Link to comment
Alan-Squareflair Posted December 18, 2012 Author Share Posted December 18, 2012 14 days old. Anyone? Link to comment
Alan-Squareflair Posted December 22, 2012 Author Share Posted December 22, 2012 Still nothing. Hmmm. I was playing again with a map last-night, and somehow got it to go to COLOR— by selecting satellite or something. But on this site, I wanted it to be non-color, so I had to insert it again. Link to comment
Paul1570047683 Posted December 22, 2012 Share Posted December 22, 2012 The problem is that when you log out and view your site as a normal visitor, the maps reverts to the black & white version. Link to comment
e2astudio Posted December 23, 2012 Share Posted December 23, 2012 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. Link to comment
Alan-Squareflair Posted May 31, 2013 Author Share Posted May 31, 2013 Thanks Eric. That's the better idea. That's why Squarespace pays you the big bucks. :) Link to comment
areichman Posted June 8, 2014 Share Posted June 8, 2014 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
Guest Posted August 4, 2014 Share Posted August 4, 2014 Thanks areichman, that was perfect!! Link to comment
Creationscape1570047825 Posted August 9, 2014 Share Posted August 9, 2014 Thanks areichman. Much appreciated! Link to comment
Guest randybruder Posted April 25, 2015 Share Posted April 25, 2015 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. Link to comment
Spencerjw Posted October 7, 2015 Share Posted October 7, 2015 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 Posted October 9, 2015 Share Posted October 9, 2015 @randybruder can you please explain a bit clearer as in the code needed. for example, what is the exact code do I use for this... https://snazzymaps.com/style/31694/new-school-red-and-black-no-labels and where do I put it... thanks Link to comment
Guest randybruder Posted October 9, 2015 Share Posted October 9, 2015 @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
mdsojke Posted March 9, 2016 Share Posted March 9, 2016 ._node.__map is no longer accessible in all templates. Even SqSp scripts, which are mapped to this doesn't work anymore. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.