Posts by calbc0

calbc0 · Aug 8th 2019

Hello,

I would like to simply add a responsive image to my site. I've used <?php perch_content('Section-two-image'); ?> but upon uploading a new image via the admin panel, the image is not responsive.. is there something that I'm missing here to allow responsive images with perch.. ?

Thank you!

calbc0 · Mar 26th 2019

Okay, thank you!

calbc0 · Mar 26th 2019

Okay, thank you. So, I've included define('PERCH_MAP_JS', 'perch/addons/plugins/maps/map_custom.js') in my config.php, this should allow perch to use my custom "map_custom.js" file instead of the default "public_maps.js", right ?

Also, should I be making my customizations in my custom "map_custom.js" file, as its a copy of "public_maps.js"? From what I understand, the default "public_maps.js" should not be modified, but copied, and the copy modified per this documentation https://docs.grabaperch.com/templates/field-types/map/

Thanks again for taking the time to answer my questions. Love using Perch! I'm just stuck on this one feature.

calbc0 · Mar 25th 2019

Yes, however I would like to have multiple locations on the map, rather than one location that is added via the control panel. Additionally, I’m seeing that the map on my live page is not interactive in that I’m unable to actually click the location pen, or drag the map..is this something that I could change in my map_custom.js file? Thank you again for your response

calbc0 · Mar 24th 2019

Hey there, thanks for your response.

Yes, so for example the default map displays a location, London. However I would like to display my own locations(latitude and longitude) instead of London.

I thought that the location(s) would be customizable in my map_custom.js file, which is a copy of the default perch public_maps.js.

Any advice?

calbc0 · Mar 24th 2019

Hello,

I would like to create my own custom google map, using a custom latitude and longitude.

I've taken a copy of public_maps.js, and have named the copy map_custom.js, which is located in my perch/addons/plugins/maps/map_custom.js

I've included define('PERCH_MAP_JS', 'perch/addons/plugins/maps/map_custom.js'); in my config.php file.

I've included define('PERCH_GMAPS_API_KEY', 'my api key'); as well.

In my map_custom.js file, where would I go about customizing the latitude and longitude?

Additionally, I'm seeing that the map currently displayed on my page is in fact a static map , and is not a javascript map which I've enabled the api key for.

I'll post my code too.

map.html

Code

<div>
<perch:content id="map" type="map" label="Address" width="640" height="360" zoom="15">
</div>

map.php (the page that I would like to use to display my custom map.)

PHP

<div class="container">
<?php perch_content('Map'); ?>
</div>

map_custom.js (a copy of public_map.js.)

Code

if (typeof CMSMap == 'undefined') {
CMSMap = {};
}
CMSMap.UI = function()
{
var api_key;
var init = function() {
if (CMSMap.maps.length) {
plot_maps();
}
};
var plot_maps = function() {
var i, l, data, img, mapdiv, latlng, opts, map, point, marker;
for (i=0,l=CMSMap.maps.length; i<l; i++) {
data = CMSMap.maps[i];
img = document.getElementById(data.mapid);
mapdiv = document.createElement('div');
mapdiv.setAttribute('id', 'd'+data.mapid);
mapdiv.setAttribute('class', 'cmsmap');
if (data.width) mapdiv.style.width = data.width+'px';
if (data.height) mapdiv.style.height = data.height+'px';
img.parentNode.insertBefore(mapdiv, img);
img.parentNode.removeChild(img);
latlng = new google.maps.LatLng(data.clat, data.clng);
opts = {
zoom: parseInt(data.zoom,10),
center: latlng
};
switch(data.type) {
case 'satellite': opts.mapTypeId = google.maps.MapTypeId.SATELLITE; break;
case 'hybrid' : opts.mapTypeId = google.maps.MapTypeId.HYBRID; break;
case 'terrain' : opts.mapTypeId = google.maps.MapTypeId.TERRAIN; break;
default : opts.mapTypeId = google.maps.MapTypeId.ROADMAP; break;
}
map = new google.maps.Map(mapdiv, opts);
point = new google.maps.LatLng(data.lat, data.lng);
marker = new google.maps.Marker({
position: point,
map: map,
title: data.adr.replace(/\\/g, '')
});
CMSMap.maps[i].gmap = map;
CMSMap.maps[i].latlng = latlng;
}
};
var refresh = function() {
var i, l;
for(i=0, l=CMSMap.maps.length; i<l; i++) {
google.maps.event.trigger(CMSMap.maps[i].gmap, 'resize');
CMSMap.maps[i].gmap.setCenter(CMSMap.maps[i].latlng);
}
return true;
};
return {
init: init,
refresh: refresh,
key: api_key
};
}();
CMSMap.Loader = function(){
var func = CMSMap.UI.init;
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
}();
var load_google_map_api = function(){
var js = document.createElement("script");
js.type = "text/javascript";
js.src = 'https://maps.googleapis.com/maps/api/js?key='+CMSMap.key;
if (typeof document.head != 'object') {
document.body.appendChild(js);
}else{
document.head.appendChild(js);
}
}();

Display More

Posts by calbc0

Responsive Image

Custom google map

Custom google map

Custom google map

Custom google map

Custom google map