CODEWITHSUNDEEP
javascriptphpgoogle-maps
MarcosDrod
MarcosDrod

Reputation: 73

Google map with Php to Js variable

i've been trying to power a google map by using a certain variable of a wordpress post, the idea is to take the data from the variable, change it to js and then insert it in the map code, this how i'm doing it

if( isset($post->ID) ){
    $gmap_lat           =   esc_html( get_post_meta($post->ID, 'property_latitude', true));
    $gmap_long          =   esc_html( get_post_meta($post->ID, 'property_longitude', true));
    $property_add_on    =   ' data-post_id="'.$post->ID.'" data-cur_lat="'.$gmap_lat.'" data-cur_long="'.$gmap_long.'" ';
    $closed_height      =   get_current_map_height($post->ID);
    $open_height        =   get_map_open_height($post->ID);
    $open_close_status  =   get_map_open_close_status($post->ID);
echo '<script type="text/javascript">
function initialize() {
    var name= "<?php echo $gmap_lat; ?>";
    var name2= "<?php echo $gmap_long; ?>";
    var latlng = new google.maps.LatLng(name ,name2 );
    var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>'; 
}

And then the map shows up in the map_canvas div. The problem i'm having is that the map loads the controls and frame but does not show any map inside, i was thinking i'm probably using the variables wrong, any idea?

Upvotes: 1

Views: 145

Answers (1)

jcubic
jcubic

Reputation: 66470

Try this instead:

echo '<script type="text/javascript">
function initialize() {
var name= "' . $gmap_lat . '";
var name2= "' . $gmap_long . '";
    var latlng = new google.maps.LatLng(name ,name2 );
    var myOptions = {
      zoom: 9,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>';

and if $gmap_lat and $gmap_long are numbers then don't use quotes.

Upvotes: 1

Related Questions