Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #22191

    I created two custom widget areas with enflod google maps widget, and I try to show ones in the contact pages, but don’t show nothing, only the title, other kind of widgets show it.

    There some problem with google maps widget?.

    The page is this http://arcomobel.com/nueva/?page_id=1167

    Thank you and sorry for my bad English.

    #114511

    It seems like wordpress adds p html tags (paragraph tags) to the html code/output which breaks the javascript code. Try to install following plugin: http://wordpress.org/extend/plugins/toggle-wpautop/ and check the “Disable wpautop” checkbox for the post/page where you want to use the widget.

    #114512

    I am trying to do similar for the contact us page. How and where do I place the google maps code?

    #114513

    Hi, Dude, I have installed the togggle-wpoutop, but don’t work.

    Other bug, in firefox 20.0 the special heading don’t show the line in correct place, show a strange line in the middle of the next text blog.

    thanks.

    #114514

    Hi,

    [if you don't need instructions on how to add the google map to a page , but want to get the driving directions working, please look here http://www.kriesi.at/support/topic/google-maps-widget-in-custom-widget-area#post-106864 ]

    If you are using the Enfold Google Map Widget, you DO NOT need to use the code from Google. The theme will generate the correct code for you.

    =======================================================================

    Complete Instructions on How to Create Contact Page + Add Google Map Widget Are Below====

    =======================================================================

    Please look at the 4 images in this album ( http://imgur.com/a/0mbXF ) I created about the exact process to create the contact page + custom sidebar for contact page + add the google map widget to the custom sidebar.

    First Image ( http://i.imgur.com/yFA8oKE.png ) Shows steps to create custom sidebar, add widget

    Second Image ( http://i.imgur.com/UYiEVnx.jpg ) This is Step 3 of the First Image, it shows how to get the Longitude and Latitude of location to show on Google Map

    Third Image ( http://i.imgur.com/ZOpbIuH.png ) This shows how to create the contact page and add the sidebar/widget area you created in First/Second Image

    Fourth Image ( http://i.imgur.com/xhgMRJP.png ) Shows end result: Custom Contact page + Custom sidebar + Google Map Widget with correct Map from Image 2

    =======================================================================

    Thanks,

    Nick

    #114515

    Hi,

    when I put the enfold google map widget with an sidebar-element into a layout element container (for example 2/3 column) the map doesn´t work anymore. If I place the sidebar-element directly into the page, the map widget works perfectly.

    https://dl.dropboxusercontent.com/u/4098960/map.png

    Do you have an idea what´s going on?

    Thanks,

    Nic

    #114516

    Hi,

    I try to do this.

    I created two custom widget areas with enflod google maps widget, http://dl.dropbox.com/u/4247539/bloodrop/img1.jpeg.

    I try to show ones in the contact pages. http://dl.dropbox.com/u/4247539/bloodrop/img2.jpeg.

    And hapend this. http://dl.dropbox.com/u/4247539/bloodrop/img3.jpeg.

    The code don’t work. http://dl.dropbox.com/u/4247539/bloodrop/img4.jpeg

    Not is this the way to use google maps widget? Put it in the sidebar is the only way to work?.

    Thanks.

    #114517

    Hi Pedroluiscar,

    thanks for your comment.

    That´s the same what happend to me. So I´m not the only one ;-)

    I´m looking forward for Kriesi´s input.

    Best,

    Nic

    #114518

    Hi,

    Sorry for the delay, My bad.

    I looked at the image you provided, and you are correct. This seems to be a bug. I am looking at this now. It’s not a major thing. Somehow there are <p> tags being added into the embedded javascript.

    Please hang on.

    Nick

    #114519

    [Edit: Code below works with single point map. If you want driving directions, a better solution is found on this url http://www.kriesi.at/support/topic/google-maps-widget-in-custom-widget-area#post-106864 ]

    Hi,

    Ok, Once you make the replacement below, everything will work fine. Please open up /framework/php/class-framework-widgets.php and find line 1177 which looks like

    $output .= "<script type='text/javascript'>

    and delete line 1177 and all other lines till the end of the file.

    In their place, please paste the code below

    $output .= "<script type='text/javascript'>
    function makeMap_".$avia_config['g_maps_widget_active']."() {
    var latlng = new google.maps.LatLng(".$lat.", ".$lng.")
    var myOptions = {
    zoom: ".$zoom.",
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.".$type."
    };
    var map = new google.maps.Map(document.getElementById('avia_google_maps_$unique'), myOptions);
    var contentString = '$content.$directionsForm';
    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: ''
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
    }
    jQuery(document).ready(function() {
    makeMap_".$avia_config['g_maps_widget_active']."();
    });
    </script>
    <div id='avia_google_maps_$unique' class='avia_google_maps_container'></div>";

    return $output;
    }

    Thanks,

    Nick

    #114520

    Hi Nick,

    thanks for your help. I changed the code like you descpriped, but it doesn´t works for me. Maybe I have made something wrong. Could you please take a look here:

    http://pastebin.com/6JyR04ML

    Thanks

    #114521

    Hi,

    I copied the whole thing you pasted in pastebin, and pasted it into my version, and it works. I made an additional change above. Would you please try the whole block above once more.

    Also, looking at your image, you have one column that is 2/3… you should add an aditional column that is 1/3 ,or change the 2/3 column to 1/1. Because I am testing this with a 2/3 column where i put a blog, and a 1/3 column where i put the custom sidebar that contains the map widget.

    Please post a snapshot of how the widget looks , open it please.

    Thanks,

    Nick

    #114522

    Please do not use the driving directions address, only the lat/long. See if it works that way.

    #114523

    Hi Nick,

    your last comment helped me to get this thing to work! The problem was the filled out driving directions address.

    Now, the map works and it doesn´t matter if you have only one column, 2/3 and so on.

    The only thing I noticed now, is a bug in the info bubble window. The content now starts inside with a code snippet:

    “<div class=”infoWindow”>Content xy ” and the bottom border of the bubble is messed up a little bit.

    https://dl.dropboxusercontent.com/u/4098960/maps.jpg

    At the moment I can live with this, but it would be nice if you guys could fix the whole thing for the next update.

    Vielen Dank für Deine Hilfe!

    Best,

    Nic

    #114524

    Thanks Nick,

    I change the code of this file and work it correctly.

    You can see it here: http://arcomobel.com/nueva/contact/

    Thanks so much.

    Pedro Luis.

    #114525

    Hi,

    I changed a good portion of the code. It’s not as neat and high level like Kriesi’s because unfortunately I don’t have his skills. However it works with directions as well as single points, with multiple maps on a single page of both driving directions and only one location map point.

    http://i.imgur.com/jyv66iQ.png

    I am certain when the next update comes Kriesi will do his magic. But for now:

    Please open up /framework/php/class-framework-widgets.php and find line 1171 which looks like:

    $directionsForm = "";

    And delete line 1171 and everything below it.

    In its place, please add the code below

    if(empty($avia_config['g_maps_widget_active']))
    {
    $output .= "<script type='text/javascript' src='$prefix://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>";
    $avia_config['g_maps_widget_active'] = 0;
    }

    $avia_config['g_maps_widget_active'] ++;

    $output .= "<script type='text/javascript'>
    function makeMap_".$avia_config['g_maps_widget_active']."() {
    var directionsDisplay;
    directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map;
    var latlng = new google.maps.LatLng(".$lat.", ".$lng.");
    var directionsto = '".$directionsto."';
    var myOptions = {
    zoom:".$zoom.",
    mapTypeControl:true,
    mapTypeId:google.maps.MapTypeId.".$type.",
    mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl:true,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},
    center:latlng
    };
    map = new google.maps.Map(document.getElementById('avia_google_maps_$unique'), myOptions);
    if(directionsto.length > 5) {
    directionsDisplay.setMap(map);
    var request = {
    origin:directionsto,
    destination:latlng,
    travelMode:google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
    if(status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response)
    }
    })
    }
    else {
    var contentString = '".$content."';
    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: ''
    });
    }
    }
    jQuery(document).ready(function() {
    makeMap_".$avia_config['g_maps_widget_active']."()
    });
    </script>
    <div id='avia_google_maps_$unique' class='avia_google_maps_container'></div>
    ";

    return $output;
    }

    Thanks,

    Nick

    #114526

    Hi Nick,

    thanks for your help. With your code now the direction function works, but the option for the bubble text doesn´t work anymore.

    But thats no problem for me. Looking forward for the next enfold update.

    Your support here is really great!

    Thanks!

    #114527

    Hi,

    Appreciate your kind words. We try our best. Thanks for pointing that out about the single location. I will fix it up today since its useless if i got one thing working while breaking what was ok.

    If you have other issues let us know.

    Thanks,

    Nick

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Google maps widget in custom widget area’ is closed to new replies.