Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

2 sp-map istance on same page WITH STYLING

Featured Lock Resolved Issue
Hi there,
i have already seen in this thread http://www.joomshaper.com/forums/cant-place-2-maps-on-same-page#reply-25977
how to put 2 sp-map on the same page but switching the map.php file, i end up losing the styling (ex onepage template)
I'd like to keep the style and to have 2 istance, it's possible to merge the old map.php (onepage template) with the new one with multiple id (linked thread) ?
i think it could be a solution but i can't make it works alone,
if any of you have any advice or help i'd be glad,
thank you.

1 Answers

sandro

More than a month ago #Permalink
what i mean is merge this old one with style in

<?php
/**
* @package Helix Framework
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2013 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/
//no direct accees
defined ('_JEXEC') or die('resticted aceess');

//[Map]
if(!function_exists('map_sc')) {
function map_sc( $atts, $content = null ){

extract(shortcode_atts(array(
'lat' => '43.04446',
'lng' => '-76.130791',
'height' => '200',
'zoom' => 8,
'map_content' => 'JoomShaper<br />Dhaka'
), $atts));

ob_start();
?>
<div style="height:<?php echo $height ?>px" id="sp_simple_map_canvas"></div>

<script type="text/javascript">
var map;

var latitude = <?php echo $lat; ?>,
logitude = <?php echo $lng; ?>,
map_lat = latitude,
map_lang = logitude - 0.005;



map = new GMaps({
el: '#sp_simple_map_canvas',
lat: map_lat,
lng: map_lang,
scrollwheel:false,
zoom: <?php echo $zoom; ?>,
zoomControl : false,
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});

map.addMarker({
lat: latitude,
lng: logitude,
verticalAlign: 'bottom',
horizontalAlign: 'center',
backgroundColor: '',
infoWindow: {
content: '<div class="map-info"><address><?php echo $content; ?></address></div>',
borderColor: 'red',
}
});


var styles = [

{
"featureType": "road",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "landscape",
"stylers": [
{ "color": "#141414" }
]
},{
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "poi",
"stylers": [
{ "color": "#161616" }
]
},{
"elementType": "labels.text",
"stylers": [
{ "saturation": 1 },
{ "weight": 0.1 },
{ "color": "#7f8080" }
]
}

];

map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});

map.setStyle("map_style");

</script>

<?php

$data = ob_get_clean();
return $data;
}
add_shortcode( 'spmap', 'map_sc' );
}


and this one

<?php
/**
* @package Helix Framework
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2014 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/
//no direct accees
defined ('_JEXEC') or die('resticted aceess');

//[Map]
if(!function_exists('map_sc')) {
function map_sc( $atts, $content="" ){

extract(shortcode_atts(array(
'id' => 'sp_simple_map_canvas',
'lat' => '-34.397',
'lng' => '150.644',
'maptype'=>'ROADMAP',
'height' => '200',
'zoom' => 8
), $atts));

Helix::addShortcodeScript('https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true', ',', false);

ob_start();

?>

<script type="text/javascript">
var myLatlng_<?php echo $id; ?> = new google.maps.LatLng(<?php echo $lat ?>,<?php echo $lng ?>;);
function initialize() {
var mapOptions = {
zoom: <?php echo $zoom; ?>,
center: myLatlng_<?php echo $id; ?>,
mapTypeId: google.maps.MapTypeId.<?php echo $maptype; ?>
};
var map = new google.maps.Map(document.getElementById('<?php echo $id; ?>'), mapOptions);
var marker = new google.maps.Marker({position:myLatlng_<?php echo $id; ?>, map:map});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="sp-map-shortcode" style="height:<?php echo $height ?>px" id="<?php echo $id; ?>"></div>

<?php

$data = ob_get_clean();
return $data;
}
add_shortcode( 'spmap', 'map_sc' );
}


But how?


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 127
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

292751

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us