Set zoom in front-end

Hi.
There is a nice example at ACF website for showing the map in the front-end.
If you use the zoom saved for the field, when passing options for Google map creation. For example, substitute the args object in the example I linked above, with the code below:

// vars
var args = {
  zoom : $location['zoom'],
  center : new google.maps.LatLng(0, 0),
  mapTypeId : google.maps.MapTypeId.ROADMAP
};

Of course I presume here that you run the code you specified in your comment above the code provided in the example. It is up to you to make alterations in the code of the example.

I’ve been trying to get this to work for days on and off, and for the life of me can’t.

Using your suggestion above, I get an error in firebug:
ReferenceError: $location is not defined

In addition to this, I’ve also been trying to get two maps with two levels of zoom on the page, so something like this would be ideal:

$location = get_field('location');
$location2 = get_field('location2');
if(!empty($location)):
?>
<div class="acf-map">
    <div class="marker" data-zoom="<?php echo $location['zoom']; ?> data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>

<div class="acf-map">
    <div class="marker" data-zoom="<?php echo $location2['zoom']; ?> data-lat="<?php echo $locatio2n['lat']; ?>" data-lng="<?php echo $location2['lng']; ?>"></div>
</div>

Any good ideas?

Hi.
Front-end map implementing is not a trivial job, unless you are familiar with PHP, HTML, JS and Google Maps API. The example is nice start off.
From what I see, your code would just set the appropriate HTML attributes for the div tags having class marker, but that won’t show any map. Moreover, if it is Firebug that states ReferenceError: $location is not defined, then you are definitely using $location variable in the wrong place – in JS code instead of PHP code.
Regards.

Thanks for responding.

I realise the code I posted will just give me an HTML attribute that I can (if I knew what I was doing!) reference in the JS map creating code.

I think I’ve confused you by mentioning two isues, so let’s just concentrate on the original topic which I still can’t get working.

In relation to your original suggestion above (2nd post in response to the OP) – from what I understand your suggestion is to use the example JS code from the ACF website (which works in its own right if zoom is left as a number in the vars) substituting the
`var args = {
zoom : 16`
for your
`var args = {
zoom : $location [ ‘zoom’ ]`

This is what gives me the error I’m finding through firebug. If as you say, this should be PHP, how do I implement your original answer to the original question using the ACF example you suggested?

Sorry if I’m not making sense!

It is my bad that I didn’t write my initial answer accurately.
In fact the code should be like this:

// vars
var args = {
  zoom : <?php echo empty($location['zoom']) ? 8 : $location['zoom']?>,
  center : new google.maps.LatLng(0, 0),
  mapTypeId : google.maps.MapTypeId.ROADMAP
};

Using $location variable not inside PHP will generate the error you mentioned. Thanks for pointing. I hope it will help someone else as well. The adjusted code example will either use zooming level saved with map or 8 as a default one. Feel free to adjust 8 to any other supported zooming level.