Skip to content

Instantly share code, notes, and snippets.

@pushandplay
Last active December 19, 2015 17:19
Show Gist options
  • Save pushandplay/5990511 to your computer and use it in GitHub Desktop.
Save pushandplay/5990511 to your computer and use it in GitHub Desktop.
<?php
/**
* @package modx
* @subpackage processors.element.tv.renders.mgr.input
*
* core/model/modx/processors/element/tv/renders/mgr/input/gmaps.class.php
*/
class modTemplateVarInputRenderGmaps extends modTemplateVarInputRender {
public function getTemplate() {
return 'element/tv/renders/input/gmaps.tpl';
}
}
return 'modTemplateVarInputRenderGmaps';
<!--
manager/templates/default/element/tv/renders/input/gmaps.tpl
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPIKeyHere&sensor=false&language=ru"></script>
<style>
#canvas {
width: 100%;
height: 400px;
}
</style>
<input id="tv{$tv->id}" name="tv{$tv->id}" type="text" class="textfield" value="{$tv->get('value')|escape}"{$style}tvtype="{$tv->type}"/>
<br/><br/>
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
var fld = MODx.load({
{/literal}
xtype: 'textfield'
,applyTo: 'tv{$tv->id}'
,width: '99%'
,enableKeyEvents: true
,msgTarget: 'under'
,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
{if $params.maxLength},maxLength: {$params.maxLength}{/if}
{if $params.minLength},minLength: {$params.minLength}{/if}
{literal}
,listeners: { 'keydown': { fn:MODx.fireResourceFormChange, scope:this}}
});
Ext.getCmp('modx-panel-resource').getForm().add(fld);
MODx.makeDroppable(fld);
});
{/literal}
// ]]>
</script><div id="canvas"></div>
<script type="text/javascript">
// configuration
var myZoom = 12;
var myMarkerIsDraggable = true;
var myCoordsLenght = 6;
var str = document.getElementById('tv{$tv->id}').value;
if (str=='') {
var defaultLat = 55.7512419;
var defaultLng = 37.6184217;
} else {
var arr = str.split(",");
var defaultLat = arr[0];
var defaultLng = arr[1];
}
{literal}
// creates the map
// zooms
// centers the map
// sets the map’s type
var map = new google.maps.Map(document.getElementById('canvas'), {
zoom: myZoom,
center: new google.maps.LatLng(defaultLat, defaultLng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});// creates a draggable marker to the given coords
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(defaultLat, defaultLng),
draggable: myMarkerIsDraggable
});// adds a listener to the marker
// gets the coords when drag event ends
// then updates the input with the new coords
google.maps.event.addListener(myMarker, 'dragend', function(evt){
{/literal}
document.getElementById('tv{$tv->id}').value = evt.latLng.lat().toFixed(myCoordsLenght) + "," + evt.latLng.lng().toFixed(myCoordsLenght);
{literal}
});// centers the map on markers coords
map.setCenter(myMarker.position);// adds the marker on the map
myMarker.setMap(map);
if (navigator.geolocation && str === '') {
navigator.geolocation.getCurrentPosition(function(position) {
userCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(userCenter);
myMarker.setPosition(userCenter);
});
}
</script>
{/literal}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment