Custom google map

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

drewm · Mar 24th 2019

Quote from calbc0

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

Can you elaborate on what you're trying to do when you say a custom lat and long?

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?

drewm · Mar 25th 2019

The idea with the map field type is that you can search for a location and plot a pin anywhere you like. Obviously the map needs to start off somewhere by default, but that should have no impact on how you're able to use the field.

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

Ftag · Mar 25th 2019

Google have extensive documentation here:

https://developers.google.com/…ation/javascript/tutorial

I found it very helpful, hopefully you can get the required information from that page.

drewm · Mar 26th 2019

Changing the public_maps.js file won't change how the field type behaves in the control panel (that's why it's labelled as _public_). To gather multiple points for a map, you can use multiple map field types and then create a custom output for them using the Google Maps API in your own template.

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.

drewm · Mar 26th 2019

Quote from calbc0

this should allow perch to use my custom "map_custom.js" file instead of the default "public_maps.js", right ?

Yes, that's right.

Quote from calbc0

Also, should I be making my customizations in my custom "map_custom.js" file, as its a copy of "public_maps.js"?

Yes, as that's the file you're using.

calbc0 · Mar 26th 2019

Okay, thank you!

Custom google map

drewm Mar 24th 2019

Similar Threads

Welcome to the new Perch forum

Small issue with simple recaptcha app