Google maps widget in custom widget area

[Edit: Code below works with single point map. If you want driving directions, a better solution is found on this url https://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

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

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.

View post on imgur.com

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

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