CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgeolocation
Gianluca Ghettini
Gianluca Ghettini

Reputation: 11648

How to add styling to the map in the jquery-locationpicker-plugin

I'm using this very useful Javascript plugin to let the user pick a point in google map

https://github.com/Logicify/jquery-locationpicker-plugin

http://logicify.github.io/jquery-locationpicker-plugin/

unfortunately the map isn't customizable and has got the default style. Looking at the js (not minified) it's clear the code is using Google maps and, moreover, it's not very complicated.

I was wondering if there is a way to style the map using the standard style object

https://developers.google.com/maps/tutorials/customizing/styling-the-base-map

Having the styling in place would deserve a branch on the github repo

Upvotes: 0

Views: 668

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Per the documentation, you can get access to the native google.maps.Map object like this:

var mapContext = $('#us3').locationpicker('map');

This is the reference to the google.maps.Map:

mapContext.map

Once you have that reference, you can set the styles property of the map:

mapContext.map.set('styles', [
  {
    stylers: [
      {hue: '#890000'},
      {visibility: 'simplified'},
      {gamma: 0.5},
      {weight: 0.5}
    ]
  },
  {
    elementType: 'labels',
    stylers: [{visibility: 'off'}]
  },
  {
    featureType: 'water',
    stylers: [{color: '#890000'}]
  }
]);

proof of concept fiddle

code snippet:

var locationPickerRef = $('#us3').locationpicker({
  location: {
    latitude: 40.7127837,
    longitude: -74.0059413
  },
  radius: 300,
  inputBinding: {
    latitudeInput: $('#us3-lat'),
    longitudeInput: $('#us3-lon'),
    radiusInput: $('#us3-radius'),
    locationNameInput: $('#us3-address')
  },
  enableAutocomplete: true
})
var mapContext = $('#us3').locationpicker('map');
mapContext.map.set('styles', [{
  stylers: [{
    hue: '#890000'
  }, {
    visibility: 'simplified'
  }, {
    gamma: 0.5
  }, {
    weight: 0.5
  }]
}, {
  elementType: 'labels',
  stylers: [{
    visibility: 'off'
  }]
}, {
  featureType: 'water',
  stylers: [{
    color: '#890000'
  }]
}]);

console.log(locationPickerRef);
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script>
<div class="form-horizontal" style="width: 550px">
  <div class="form-group">
    <label class="col-sm-2 control-label">Location:</label>

    <div class="col-sm-10">
      <input type="text" class="form-control" id="us3-address" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Radius:</label>

    <div class="col-sm-5">
      <input type="text" class="form-control" id="us3-radius" />
    </div>
  </div>
  <div id="us3" style="<width:></width:> 550px; height: 400px;"></div>
  <div class="clearfix">&nbsp;</div>
  <div class="m-t-small">
    <label class="p-r-small col-sm-1 control-label">Lat.:</label>

    <div class="col-sm-3">
      <input type="text" class="form-control" style="width: 110px" id="us3-lat" />
    </div>
    <label class="p-r-small col-sm-2 control-label">Long.:</label>

    <div class="col-sm-3">
      <input type="text" class="form-control" style="width: 110px" id="us3-lon" />
    </div>
  </div>
  <div class="clearfix"></div>
</div>

Upvotes: 1

Related Questions