I’m currently loading a Google Maps in my WordPress website on single posts, based on an address that you can fill in in the back-end (I’m using ACF to make the input field for the address).

I was wondering if it is possible to load the JS for the Google Maps from my main.js file, or that this is impossible since a bit of PHP is loaded into the map to create the mapcentre + marker location.

<?php if( get_field('adres') ): ?>
<div id="google-maps-holder"><div id="google-maps"></div></div>
<?php endif; ?>

<?php 

$address = get_field( "adres" );

$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($address).'&sensor=false');
$geo = json_decode($geo, true);

if ($geo['status'] = 'OK') {
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}

?>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyA3MMTHCfouqOWKuRiqDHUjtlPaHJf3_JE"></script>
<script type="text/javascript">

google.maps.event.addDomListener(window, 'load', init);

function init() {
    var bounds = new google.maps.LatLngBounds();
    var styles = [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi", elementType: "labels", stylers: [{ visibility: "off" }]}]

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

var myLatLng = {lat: <?php print $latitude ?>, lng: <?php print $longitude; ?>};

var isDraggable = w > 1025 ? true : false;   

var mapProp = {
    center:             myLatLng,
    zoom:               18,
    mapTypeId:          google.maps.MapTypeId.ROADMAP,
    scrollwheel:        false,
    draggable:          isDraggable,
    disableDefaultUI:   true,
    styles:             styles
    };

var map = new google.maps.Map(document.getElementById('google-maps'), mapProp);

var markers = [
['<?php the_field('venue'); ?>', myLatLng, 'https://www.google.nl/maps/dir/<?php the_field('adres'); ?>' ],
];

var icon = {
path: 'm44.400002,20.5c-0.100002,6.200001 -2.5,11.5 -6.100002,16.299999c-3.399998,4.600002 -7.599998,8.400002 -12.299999,11.600002c-0.5,0.299999 -0.9,0.599998 -1.5,0.199997c-7,-4.899998 -12.9,-10.599998 -16.5,-18.299999c-2.6,-5.599998 -3.3,-11.299999 -0.9,-17.099999c3,-7 8.3,-10.9 15.8,-11.8c9.800001,-1.1 18.9,5.5 20.9,15.1c0.400002,1.299999 0.400002,2.6 0.600002,4zm-19.400002,-10.3c-5.200001,0 -9.2,4.1 -9.2,9.3c0,5.1 4.3,9.200001 9.400001,9.1c4.9,0 9,-4.300001 9,-9.4c0,-5.000001 -4.1,-9.000001 -9.200001,-9.000001z',
strokeColor: '#B993D6',
strokeOpacity: 1,
strokeWeight: 2,
fillColor: '#FFFFFF',
fillOpacity: 0.667,
rotation: 0,
scale: 2.5,
size: new google.maps.Size(80, 90),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(25, 50)
};

for( i = 0; i < markers.length; i++ ) {

var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: markers[i][0],
        icon: icon,
        url: markers[i][3],
    });

google.maps.event.addListener(marker, 'click', function() { 
    window.open(this.url, '_blank');
}); 

google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

}  
}

Working example:
https://letsmosh.nl/attila-patronaat/

Read more here: Load Google Maps from own .JS file


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: