How do I render the map on the public viewable page?

[jcamomile]

I see that I can render the map in the admin, but is there a function to use for rendering it on the public viewable page?

[marioktian]

Up please

[ogdsgn]

I'd love to learn how to do this too.

cheers!

[kirillbunin]

Hey guys, this plugin saves latitude and longitude (GPS coordinates) to post meta. Meaning you can retrieve it like so:

mapGPS = get_post_meta( get_the_ID(), 'my_field_id', true );

then you can get latitude and longitude like this:

echo mapGPS['latitude'];
echo mapGPS['longitude'];

Now this plugin, nor it's data cannot generate map by itselves. But you can use google maps api to do it yourself, for example like this:

// Loads google map javascript api
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
// Creates element to load map into
<div id="gmap_canvas" style="height:500px;width:500px;"></div>
<script type="text/javascript">
    function init_map(){
        // Options
        var myOptions = {
            zoom:14,
            center:new google.maps.LatLng(<?php echo mapGPS[latitude]; ?>,<?php echo mapGPS[longitude]; ?>)
        };
        // Setting map using options
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        // Setting marker to our GPS coordinates
        marker = new google.maps.Marker({map: map,clickable: false,position: new google.maps.LatLng(<?php echo mapGPS[latitude]; ?>,<?php echo mapGPS[longitude]; ?>)});
    }
    // Initializes google map
    google.maps.event.addDomListener(window, 'load', init_map);
</script>

You can read more on the subject of using Google Maps Api at their website https://developers.google.com/maps/web/

// EDIT: Missing quotes as AurelienZMN pointed out.

// EDIT2: I used var mapGPS to define a variable

[AurelienZMN]

You should add quotes to get latitude and longitude

echo mapGPS['latitude'];
echo mapGPS['longitude'];

[Ltbaynosa]

Hi Guys,

I just need some clarification on how I can show this in the front-end:

<?php var mapGPS = get_post_meta( get_the_ID(), 'my_field_id', true ); ?>

this line makes the site broken.

Thanks in advance

[kirillbunin]

PHP doesn't define variables with var. http://php.net/manual/en/language.variables.php

[Ltbaynosa]

Hi kirillbunin,

Thanks for the reply, I'm very new to PHP and not sure on how to make it show in the front-end. Can you give me a brief explanation?

Thanks

[kirillbunin]

This is extension plugin for CMB2 library https://github.com/WebDevStudios/CMB2 so considering you understand how to implement it and did succesfully display it on backend and saved some data, you can put this code in your wordpress template to retrieve the data

<?php 
mapGPS = get_post_meta( get_the_ID(), 'my_field_id', true );
echo 'My map latitude: ' . mapGPS['latitude'];
echo 'My map longitude: ' . mapGPS['longitude'];
?>

[Ltbaynosa]

Yes I was working on CMB2 plugin and badly needed the google map extension. I also have the map field on the back-end. the code you sent still broke the site. I also tried: <?php $mapGPS = get_post_meta( get_the_ID(), 'gmap', true ); echo 'My map latitude: ' . mapGPS['latitude']; echo 'My map longitude: ' . mapGPS['longitude']; ?>

But it display: My map latitude:mMy map longitude:m

[kirillbunin]

what does this return? print_r(get_post_meta( get_the_ID(), 'gmap', true ))

[Ltbaynosa]

print_r(get_post_meta( get_the_ID(), 'gmap', true )) no output

[kirillbunin]

It really depends on your code, make sure that get_the_ID() returns your page's ID (you might be using it wrong within/without loop) and that your ID is gmap

[Ltbaynosa]

I understand that part: $cmb->add_field( array( 'name' => 'Google Map', 'desc' => 'Drag the marker to set the exact location', 'id' => $prefix . 'gmap', 'type' => 'pw_map', 'split_values' => true, // Save latitude and longitude as two separate fields ) ); Here's how I called the map field the prefix is projects

I also tried it calling with the prefix: <?php $mapGPS = get_post_meta( get_the_ID(), '_projects_gmap', true ); echo 'My map latitude: ' . mapGPS["latitude"] . ''; echo 'My map longitude: ' . mapGPS["longitude"] .'' ; ?> still displays: My map latitude:mMy map longitude:m

[kirillbunin]

You always want to call for full ID. So if your $prefix is equal to _projects_ you will call for get_post_meta( get_the_ID(), '_projects_gmap', true ). If $prefix = "projects_" you will call for get_post_meta( get_the_ID(), 'projects_gmap', true ).

If you are not sure what is the ID of your meta data, you can print raw output of print_r(get_post_meta( get_the_ID() )); and find it there.

[Ltbaynosa]

Got it to work... print_r(get_post_meta( get_the_ID() )); this code helps me found the lat and long id:

<?php $mapgpslat = get_post_meta( get_the_ID(), '_projects_gmap_latitude', true ); $mapgpslong = get_post_meta( get_the_ID(), '_projects_gmap_longitude', true ); ?>

then it shows the correct lat and long: echo $mapgpslat; echo $mapgpslong;

Thank you very much kirillbunin for the help :)