Chit-Chat

Snazzymaps

Permalink April 10, 2014 at 11:28 PM

Can I use color schemes fromhttp://snazzymaps.com/ in the Google map block? I know it is not an integral part of it, but is there a way?

mesuva replied on Apr 11, 2014 at 2:39 am Permalink Reply

This might help: http://www.mesuva.com.au/blog/concrete5/how-to-customise-the-appear...

I hadn't seen Snazzymaps, that's very cool. (might link it on my blog post!)

djoniba replied on Apr 11, 2014 at 3:14 am Permalink Reply

Fantastic. Thanks a lot.

Found the site when looking for one page html templates (thinking about making my own site flat html instead of cms). One of the themes used this site for a grey map. very cool

http://startbootstrap.com/grayscale...

djoniba replied on Apr 11, 2014 at 3:39 am Permalink Reply

Harder than I thought. I chose the map I liked and was presented with two blocks of code.
I am guessing I have to pick out the snippets I need to change the map in the may that you describe.

Care to point me in the right direction?

Here is the code to create the map:

var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(53.385873, -1.471471),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}]
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);

In addition there is a code for Java Script Style Array

[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}]

Hmm. What to do.

Link to the map in question:http://snazzymaps.com/style/13/neutral-blue...

mesuva replied on Apr 11, 2014 at 3:43 am Permalink Reply

Try to just follow my instructions exactly, then when you get to the bit where it talks about:

var styles = [];

just replace the [] with your javascript style array.

I don't think you need to consider the 'Create a map' piece of code Snazzymaps generates, just the array of the styles.

djoniba replied on Apr 11, 2014 at 4:28 am Permalink Reply

Great. I'll give it a try. Thanks

djoniba replied on Apr 11, 2014 at 6:07 am Permalink Reply

Cant seem to be able to change the colors. I noticed that I do not get color coding of var styles in Coda. Have I forgotten something?
Here is the code:

<?php 
   defined('C5_EXECUTE') or die("Access Denied.");
   class GoogleMapBlockController extends Concrete5_Controller_Block_GoogleMap {
      public function on_page_view() {
         $html = Loader::helper('html');
         $c = Page::getCurrentPage();
         if (!$c->isEditMode()) {
            $this->addFooterItem('<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>');
            $this->addFooterItem('<script type="text/javascript"> 
            function googleMapInit' . $this->bID . '() { 
               try{
                 var latlng = new google.maps.LatLng(' . $this->latitude . ', ' . $this->longitude . ');
                   var styles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}]
                  var mapOptions = {
                   zoom: ' . $this->zoom . ',

Viewing 15 lines of 46 lines. View entire code block.

<?php 
   defined('C5_EXECUTE') or die("Access Denied.");
   class GoogleMapBlockController extends Concrete5_Controller_Block_GoogleMap {
 
      public function on_page_view() {
         $html = Loader::helper('html');
         $c = Page::getCurrentPage();
         if (!$c->isEditMode()) {
            $this->addFooterItem('<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>');
            $this->addFooterItem('<script type="text/javascript"> 
            function googleMapInit' . $this->bID . '() { 
               try{
                 var latlng = new google.maps.LatLng(' . $this->latitude . ', ' . $this->longitude . ');
 
                   var styles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}]
 
                  var mapOptions = {
                   zoom: ' . $this->zoom . ',
                   center: latlng,
                   mapTypeId: google.maps.MapTypeId.ROADMAP,
                   streetViewControl: false,
                   mapTypeControl: false
                 };
                  var map = new google.maps.Map(document.getElementById(\'googleMapCanvas' . $this->bID . '\'), mapOptions);
                  var marker = new google.maps.Marker({
                     position: latlng, 
                     map: map
                  });
               }catch(e){
               $("#googleMapCanvas'. $this->bID .'").replaceWith("<p>Unable to display map: "+e.message+"</p>")}
            }
            $(function() {
               var t;
               var startWhenVisible = function (){
                  if ($("#googleMapCanvas'. $this->bID .'").is(":visible")){
                     window.clearInterval(t);
                     googleMapInit' . $this->bID . '();
                     return true;
                  } 
                  return false;
               };
               if (!startWhenVisible()){
                  t = window.setInterval(function(){startWhenVisible();},100);      
               }
            });            
            </script>');            
         }
      }
 
   }

mesuva replied on Apr 11, 2014 at 8:59 pm Permalink Reply 1 Attachment

See my attached, drop the folder into your top level blocks folder so you have /blocks/google_map/controller.php

mesuva replied on Apr 11, 2014 at 9:01 pm Permalink Reply

But just looking at your code, I think you're simply missing the semicolon at the end of your styles. It needs to end in

}];

djoniba replied on Apr 12, 2014 at 10:28 pm Permalink Reply

Fantastiv. Thanks a bunch. Just one question. I would like to remove the grids on the map (the strong white vertical and horizontal lines). I checked and discovered it is a css problem (how blocks are defined in the css). Can I make a custom css class just for the map?

Forums

Chit-Chat

Snazzymaps

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?