TOPIC: Styled Maps in V2.0.5

Hi i was wondering if it would be possible to stylize the google maps using the google maps wizard - Which file would i be able to paste the JSON code to? and which file ultimately controls the map itself? if this possible to do? if so, how could we be able to add styles to the map, i think this would be a great function for newer versions of hotspots.

if you dont understand what I am talking about, please visit the styled map documentation on google.

thanks

Hey Javed,
I'm fully aware of the styled maps & they will be included as an option in the next hotspots version.

As far as 2.0.5 is concerned - you should make the modifications in the Hotspots.js file.

Regards,
Daniel

Hi Daniel Thanks for the quick response.

I went ahead and found the hotspots.js file, but I have minimal coding skills, but after analyzing the code, i found that i can edit the styles within the .mapOptions - but it's not like the code i found on google.

If you would help me implement the style, that would be great and I wouldn't mind paying extra for the guidance, as of now I know I would have to add some lines here:

setMapOptions: function() {
var mapOptions = {
disableDefaultUI: this.googleMapsDisableDefaultUI(),
navigationControl: this.googleMapsEnableNavigationControl(),
navigationControlOptions: {
'style': this.googleMapsControlStyle(),
'position': this.googleMapsNavigationControl()
},
scrollwheel: true

};
this.map.getMap().setOptions(mapOptions);
this.setMapType();
},

---

but I need to add the styles to it, and this is what I have came up with:


var mapStyle = [
{
featureType: "poi.park",
stylers: [
{ hue: "#00d4ff" },
{ visibility: "simplified" },
{ lightness: 22 }
]
},{
featureType: "administrative.country",
stylers: [
{ visibility: "simplified" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "simplified" }
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
stylers: [
{ saturation: 43 },
{ hue: "#00e5ff" },
{ lightness: 84 }
]
},{
},{
featureType: "landscape",
elementType: "geometry",
stylers: [
{ hue: "#00d4ff" },
{ lightness: -2 },
{ saturation: 36 }
]
},{
featureType: "road",
stylers: [
{ hue: "#00c3ff" },
{ lightness: 34 },
{ saturation: -41 }
]
},{
featureType: "administrative.country",
stylers: [
{ hue: "#00aaff" },
{ saturation: 18 },
{ lightness: 30 }
]
},{
featureType: "poi.attraction",
stylers: [
{ hue: "#00bbff" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ visibility: "simplified" }
]
},{
featureType: "transit.station.airport",
stylers: [
{ hue: "#00c3ff" },
{ saturation: 31 },
{ lightness: 39 }
]
},{
featureType: "poi",
stylers: [
{ hue: "#00bbff" },
{ saturation: 9 },
{ visibility: "on" },
{ lightness: 55 }
]
},{
featureType: "landscape.man_made",
stylers: [
{ lightness: 32 }
]
},{
featureType: "road",
stylers: [
{ lightness: 13 }
]
},{
featureType: "transit.line",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit.station",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
stylers: [
{ saturation: 17 },
{ lightness: 26 },
{ hue: "#00b2ff" }
]
},{
featureType: "landscape.natural",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
}
];
var myOptions = {
center: new google.maps.LatLng(mapOpts.centreLat, mapOpts.centreLong),
zoom: mapOpts.zoom,
styles: mapStyle,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
maxZoom:mapOpts.zoom,
minZoom:mapOpts.zoom,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"), myOption












Can you give me an idea, of what I need to add into the file, or what I should remove? this would be a great lesson for the community and i am sure this will be of interest to many hotspots users!

thanks

Hey Daniel, any luck with my last request, it would be a great help, again... I dont mind paying you for your time.

Look at the console output (with firebug or chrome inspector) - what is the error that you receive when you add this code?

Actually you'll just need to add the var Mapstyle and then add
styles: Mapstyle
to the options object for the map

Regards,
Daniel

Hi Daniel, Thank you for quick response.

But actually I don't have much experience with php, JSON or anything related to Scripts, but I do know how some ways to manipulate and make small hacks.

I was wondering if possibly you can provide me a quick snippet of code to add to the hotspots file (var mapstyles) and I will test it out then using the JSON snippet I created. Things like which line I should add it into and what code I should add. I haven't attempted it myself since I don't want to corrupt the script or anything.

I would also need to know where I can implement to styles options, I looked at the code sample from google and it doesn't look like the code in the hotspots JSON.

A quick guide would definatley help me out here and I would be very grateful to compojoom for this great support.

Hi Daniel,

Any luck on the code to place in the hotspots.js file?

This code is for Hotspots 3.0. We no longer support 2.0.5:
in media/com_hotspots/js/sandbox.js

on line 163 you have the setMapOptions function. Change it to this:
And you'll get the blue map that you have defined in your styles.

Regards,
Daniel

on 2.0.5 in the Hotspots js we have the same function. So just add the styles information there and it should be working.

okay so the above code you provided is for 3.0, can i cut and paste this code in the hotspots.js file in v2.0.5 ? by adding the var MapStyles under setMapOptions. do I delete the rest of the code? or should i just add it as another class under the mapoptions.

sorry, im very new to this, but thanks for you help and if it goes well i will let you know.

Daniel, this worked flawlessly, I had to do a few tweeks, but I managed to get it working. I will be leaving a great review on joomla.org and related extension sites.

I appreciate the support.