Hi,
I'm playing around with creating a plugin and I've hit a brick wall. When editing/creating new post, I'm trying to add a meta box with a google map in it (using maps.googleapis.com).
I haven't found much online, but what I did have led me to this:
function print_google_map_script() {
// we could load conditionally by page if we want here
global $post;
$geoecode_country = get_post_meta($post->ID, 'Location', true);
?>
<script type='text/javascript'>
var geocoder;
var map;
var query = '<?php echo $geoecode_country; ?>';
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom:3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=API&sensor=false&callback=initialize";
document.body.appendChild(script);
}
jQuery(window).load(function(){
loadScript();
});
</script>
<?php
}
But I keep getting a
Cannot read property 'offsetWidth' of null
error in my console.
Google points me to the fact that the elements haven't rendered yet on the posts page, but I'm unsure of how to avoid this.
Any tips?
Thanks,
Sysem