Custom Field Google Maps

Hello Bruno,
I need to be clear about your issue. Are you trying to show the map and the coordinates both? and the map is not working or the coordinates are not displaying the way you want?

Dear Sekander,

yes I’m trying to show the map and the coordinates.
Hope to hear from you soon.

Thank you.

I am interested also in show map and coordinates.

Regards
Frank

Hi guys!
I’ve been able to worked out.
Hope this solution helps any others.

The solution: and echoing the get_post_meta var you’ve defined on the wp front-end.

Using Google Maps API V3
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

The Script in your single.php (or ohter)

<script>
function initialize() {
var myLatlng = new google.maps.LatLng(<strong><?php echo get_post_meta( $post->ID, 'map_location', true ); ?></strong>);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
										
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'We are here!'
});
}
										
										google.maps.event.addDomListener(window, 'load', initialize);
										
									</script>
									<div id="map-canvas"></div>

Important!
Don’t forget to define a min-height for #map-canvas in your CSS.

Hello Bruno, For me your solution doesn’t work 🙁 . Can you take a look please?

I put this on my single.php

Still waiting for Wedevs support. It have no sense that they put a feature that we can’t show in a simple way 🙁

Francisco,
from my code above change this line to:

var myLatlng = new google.maps.LatLng(<?php echo get_post_meta( $post->ID, 'map_location', true ); ?>);

Let me know if it is working now.

Hello Bruno,

Thanks for reply so fast :).

Y also try removing “ before reply you but doesn’t work.” Of course I have #map-canvas with min-height, z-index… and I see only a block of white. No map showed.

This is the ouput with the chrome Developer Tools:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.gstatic.com/maps-api-v3/api/js/18/4/intl/es_ALL/main.js" type="text/javascript"></script>

<script> function initialize() { var myLatlng = new google.maps.LatLng(41.7916553,0.8098476999999775); var mapOptions = { zoom: 10, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'We are here!' }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
<div id="map-canvas"></div>

Regards
Frank

Please, this is not resolved. In my case doesn’t work.

Some support please?

Regards
Frank

Hello Frank,
Can you please describe what you are trying to and not working?

Hello Sekander,

Finally I resolve my problem with less code than Bruno and works ok.

I put this on my single.php:

<?php echo wpuf_shortcode_map_post( ‘my_metakey_map’, $post_id ); ?>

and works fine. I see in documentation about WP geo, but this is more simple and works nice so I think put in documentation is a good idea

Thanks
Frank

Hi Frank,
I would be glad if you can write a blog post regarding this issue. That would let your friends and other people know about this issue and how you bravely solved it.
And I will include this also in our documentation.

Thank you so much for being awesome!! 😀