Wie Styling der Karte in der Jquery-locationpicker-Plugin hinzufügen

Question

ich diese sehr nützlich Javascript-Plugin bin mit dem Benutzer wählen Sie einen Punkt in google map

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

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

lassen Leider ist die Karte nicht anpassbar und hat den Standard-Stil. Mit Blick auf die js (nicht minimiert) ist es klar, dass der Code Google Maps verwendet und außerdem ist es nicht sehr kompliziert.

Ich frage mich, ob die Karte mit dem Standard-Style-Objekt

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

Nachdem das Styling statt es eine Möglichkeit ist, einen Zweig verdient auf der GitHub Repo

Answer 1

Per the documentation würde, Stil, Sie können wie folgt auf das native Objekt google.maps.Map zugreifen:

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

Dies ist die Referenz erenz zum google.maps.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-Schnipsel:

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"></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>

mapContext.map 

Sobald Sie diese Referenz haben, können Sie die Stile Eigenschaft der Karte festlegen