S
S
Sergey Sofichev2016-01-22 18:28:58
css
Sergey Sofichev, 2016-01-22 18:28:58

How to implement google maps + gmaps.js color scheme?

There is a map implemented through gmaps.js

var map;
    $(document).ready(function(){
      pacientamMapCenter = new GMaps({
        el: '#pacientam-map-center',
        lat: 55.794612,
        lng: 37.392121,
        zoomControl : true,
        zoom: 17,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false
      });
      pacientamMapCenter.addMarker({
        lat: 55.794612,
        lng: 37.392121
      });
    });

The question is:
1. How to change the color scheme of the map itself (eg saturation: -100);
2. How to add a stylized marker.
Changing the color scheme without gmaps is understandable.
But how can they be combined, and is it possible?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey Sofichev, 2016-01-24
@thisishappi

function initMap() {
      var customMapType = new google.maps.StyledMapType([
        {
          stylers: [
            {saturation: -100}
          ]
        }
      ], {
        name: 'Custom Style'
      });

      var customMapTypeId = 'custom_style';

      var map = new google.maps.Map(document.getElementById('index-map'), {
        zoom: 4,
        center: {lat: 54.794612, lng: 70.7},
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
        }
      });

      map.mapTypes.set(customMapTypeId, customMapType);
  			map.setMapTypeId(customMapTypeId);

  			var contentString = '<div>TEST</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 400
      });

      var marker = new google.maps.Marker({
        position: {lat:53, lng: 65},
        map: map,
        icon: '/images/icons/index-marker.png'
      });

      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });

    }
    initMap();

#
#rybak, 2016-01-24
@Ravell

I think this page will help you
. At the very bottom, the "Get code" button, which displays the code with the settings.
If you specify some point in the "Add Locations" field, then in the code you will see the path to the marker image
something like: ' https:// mapbuildr.com/assets/img/markers/default.png '

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question