Skip to content

Update Google Maps API to use current version, resolve error that prevents rendering maps #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SkyLundy wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update Google Maps API to use current version, resolve error that prevents rendering maps #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 112 additions & 119 deletions InputfieldMapMarker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,126 +5,119 @@

var InputfieldMapMarker = {

options: {
zoom: 12, // mats, previously 5
draggable: true, // +mats
center: null,
//key: config.InputfieldMapMarker.googleApiKey,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: false
},

init: function(mapId, lat, lng, zoom, mapType) {

var options = InputfieldMapMarker.options;

if(zoom < 1) zoom = 12;
options.center = new google.maps.LatLng(lat, lng);
options.zoom = parseInt(zoom);

if(mapType == 'SATELLITE') options.mapTypeId = google.maps.MapTypeId.SATELLITE;
else if(mapType == 'ROADMAP') options.mapTypeId = google.maps.MapTypeId.ROADMAP;

var map = new google.maps.Map(document.getElementById(mapId), options);

var marker = new google.maps.Marker({
position: options.center,
map: map,
draggable: options.draggable
});

var $map = $('#' + mapId);
var $lat = $map.siblings(".InputfieldMapMarkerLat").find("input[type=text]");
var $lng = $map.siblings(".InputfieldMapMarkerLng").find("input[type=text]");
var $addr = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=text]");
var $addrJS = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=hidden]");
var $toggle = $map.siblings(".InputfieldMapMarkerToggle").find("input[type=checkbox]");
var $zoom = $map.siblings(".InputfieldMapMarkerZoom").find("input[type=number]");
var $notes = $map.siblings(".notes");

$lat.val(marker.getPosition().lat());
$lng.val(marker.getPosition().lng());
$zoom.val(map.getZoom());

google.maps.event.addListener(marker, 'dragend', function(event) {
var geocoder = new google.maps.Geocoder();
var position = this.getPosition();
$lat.val(position.lat());
$lng.val(position.lng());
if($toggle.is(":checked")) {
geocoder.geocode({ 'latLng': position }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK && results[0]) {
$addr.val(results[0].formatted_address);
$addrJS.val($addr.val());
}
$notes.text(status);
});
}
});

google.maps.event.addListener(map, 'zoom_changed', function() {
$zoom.val(map.getZoom());
});

$addr.blur(function() {
if(!$toggle.is(":checked")) return true;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK && results[0]) {
var position = results[0].geometry.location;
map.setCenter(position);
marker.setPosition(position);
$lat.val(position.lat());
$lng.val(position.lng());
$addrJS.val($addr.val());
}
$notes.text(status);
});
return true;
});

$zoom.change(function() {
map.setZoom(parseInt($(this).val()));
});

$toggle.click(function() {
if($(this).is(":checked")) {
$notes.text('Geocode ON');
// google.maps.event.trigger(marker, 'dragend');
$addr.trigger('blur');
} else {
$notes.text('Geocode OFF');
}
return true;
});

// added by diogo to solve the problem of maps not rendering correctly in hidden elements
// trigger a resize on the map when either the tab button or the toggle field bar are pressed

// get the tab element where this map is integrated
var $map = $('#' + mapId);
var $tab = $('#_' + $map.closest('.InputfieldFieldsetTabOpen').attr('id'));
// get the inputfield where this map is integrated and add the tab to the stack
var $inputFields = $map.closest('.Inputfield').find('.InputfieldStateToggle').add($tab);

$inputFields.on('click',function(){
// give it time to open
window.setTimeout(function(){
google.maps.event.trigger(map,'resize');
map.setCenter(options.center);
}, 200);
});

}
options: {
zoom: 12,
draggable: true, // +mats
center: null,
Copy link

@Phatskool Phatskool Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SkyLundy
Hi! quick question, i used your code, i also added a mapId attribute over here, but i get a request denied message below my map. any troubleshooting ideas?

Copy link
Author

@SkyLundy SkyLundy Apr 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Phatskool Sorry for the late reply, my first thought is that it's an issue with Google. The request is being made but the only entity that can deny it would be Google.

If I remember there are some settings where you need to define where the map may be used(?). Sorry I can't be of more help at the moment, I'm traveling and can't remember the steps off the top of my head.

Copy link

@Phatskool Phatskool Apr 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SkyLundy Much thanks, it appears that geolocation and geocoding are not supported with HTTP referrer restrictions.

mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: false
},

init: function(mapId, lat, lng, zoom, mapType) {

var options = InputfieldMapMarker.options;

if(zoom < 1) zoom = 12;
options.center = new google.maps.LatLng(lat, lng);
options.zoom = parseInt(zoom);

if(mapType == 'SATELLITE') options.mapTypeId = google.maps.MapTypeId.SATELLITE;
else if(mapType == 'ROADMAP') options.mapTypeId = google.maps.MapTypeId.ROADMAP;

function initMapActions(map, marker, geocoder) {
var $map = $('#' + mapId);
var $lat = $map.siblings(".InputfieldMapMarkerLat").find("input[type=text]");
var $lng = $map.siblings(".InputfieldMapMarkerLng").find("input[type=text]");
var $addr = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=text]");
var $addrJS = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=hidden]");
var $toggle = $map.siblings(".InputfieldMapMarkerToggle").find("input[type=checkbox]");
var $zoom = $map.siblings(".InputfieldMapMarkerZoom").find("input[type=number]");
var $notes = $map.siblings(".notes");

$lat.val(marker.position.lat);
$lng.val(marker.position.lng);
$zoom.val(map.getZoom());

$addr.blur(function() {
var address = $(this).val();

if(!$toggle.is(":checked") || !address) return true;

geocoder.geocode({ 'address': address }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK && results[0]) {
var position = results[0].geometry.location;
map.setCenter(position);
marker.position = position;
$lat.val(position.lat());
$lng.val(position.lng());
$addrJS.val($addr.val());
}
$notes.text(status);
});
return true;
});

$zoom.change(function() {
map.setZoom(parseInt($(this).val()));
});

$toggle.click(function() {
if($(this).is(":checked")) {
$notes.text('Geocode ON');
// google.maps.event.trigger(marker, 'dragend');
$addr.trigger('blur');
} else {
$notes.text('Geocode OFF');
}
return true;
});

// added by diogo to solve the problem of maps not rendering correctly in hidden elements
// trigger a resize on the map when either the tab button or the toggle field bar are pressed

// get the tab element where this map is integrated
var $map = $('#' + mapId);
var $tab = $('#_' + $map.closest('.InputfieldFieldsetTabOpen').attr('id'));
// get the inputfield where this map is integrated and add the tab to the stack
var $inputFields = $map.closest('.Inputfield').find('.InputfieldStateToggle').add($tab);

$inputFields.on('click',function(){
// give it time to open
window.setTimeout(function(){
google.maps.event.trigger(map,'resize');
map.setCenter(options.center);
}, 200);
});
}

/**
* Initialize all Google Maps API objects
*/
async function initMap() {
var { Map } = await google.maps.importLibrary("maps");
var { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
var { Geocoder } = await google.maps.importLibrary("geocoding");

options.mapId = mapId;

var map = new Map(document.getElementById(mapId), options);
var marker = new AdvancedMarkerElement({ map, position: options.center });
var geocoder = new Geocoder();

initMapActions(map, marker, geocoder);
}

initMap();
}
};

$(document).ready(function() {
$(".InputfieldMapMarkerMap").each(function() {
var $t = $(this);
InputfieldMapMarker.init($t.attr('id'), $t.attr('data-lat'), $t.attr('data-lng'), $t.attr('data-zoom'), $t.attr('data-type'));
});
$(".InputfieldMapMarkerMap").each(function() {
var $t = $(this);
InputfieldMapMarker.init($t.attr('id'), $t.attr('data-lat'), $t.attr('data-lng'), $t.attr('data-zoom'), $t.attr('data-type'));
});
});