Locations Map Customization

Thanks for the reply Robswaimea.

Yeah after I responded yesterday I did some more digging and got it working using basically the same method.

It’s really weird that we are needing to modify the core files in order to get custom markers on ‘locations_map’. This is most definitely something that should be forwarded to the plug-in author for a real comment (instead of just Caimin or Angelo which just seem to offer base-line support and that’s it)!

Anyways, what I was looking to do which might be kind of niche was have it so that the first location displayed a different custom marker, and anything after the first one a different custom marker.

I basically did the same thing except

var templateDir = "<?php echo get_template_directory_uri(); ?>";
var myIcon = new google.maps.MarkerImage(templateDir + "/images/star-3.png", null, null, null, new google.maps.Size(22,25));

set a variable and path for my icon

	for (var i = 0; i < marker.length; i++) {
		marker[0].setOptions({
                    "icon": myIcon

        });
                marker[i].setOptions({
                    "icon": 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
        });
	}

and then targeted the first iteration marker[0], set to the defined myIcon variable.
Then used marker[i] to target all the other icons.

But, I’m still rather novice at Javascript, so I’m not really convinced I’m doing this the best way (although, in initial testing, it seemed to work as I want it too) for having a different first iteration in this for loop we are using. So still plan on looking back into this later down the road to optimize it, but you get the general idea.

Additionally I just put this right in the middle of my single page template.. so I don’t think it matters where you place it (header, footer, on page, anywhere).

• This reply was modified 8 years, 2 months ago by ekko848.

Hello everyone,

Personnaly I can’t customize my map on event-manager.
I putted these lines on the event-manager.js that I found on the Google Maps API documentation :

var styledMapType = new google.maps.StyledMapType(
[
{elementType: “geometry”, stylers: [{“color”: “#212121”}] },
{elementType: “labels.icon”,stylers: [{ “visibility”: “off”}] },
{elementType: “labels.text.fill”,stylers: [{ “color”: “#757575”}] },
{elementType: “labels.text.stroke”,stylers: [{ “color”: “#212121”}] },
{
featureType: “administrative”,
elementType: “geometry”,
stylers: [{ “color”: “#757575”}]
},
{
featureType: “administrative.country”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#9e9e9e”}]
},
{
featureType: “administrative.land_parcel”,
stylers: [{ “visibility”: “off”}] },
{
featureType: “administrative.locality”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#bdbdbd”}]
},
{
featureType: “poi”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#757575”}]
},
{
featureType: “poi.park”,
elementType: “geometry”,
stylers: [{ “color”: “#181818”}]
},
{
featureType: “poi.park”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#616161”}]
},
{
featureType: “poi.park”,
elementType: “labels.text.stroke”,
stylers: [{ “color”: “#1b1b1b”}]
},
{
featureType: “road”,
elementType: “geometry.fill”,
stylers: [{ “color”: “#2c2c2c”}]
},
{
featureType: “road”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#8a8a8a”}]
},
{
featureType: “road.arterial”,
elementType: “geometry”,
stylers: [{ “color”: “#373737”}]
},
{
featureType: “road.highway”,
elementType: “geometry”,
stylers: [{ “color”: “#3c3c3c”}]
},
{
featureType: “road.highway.controlled_access”,
elementType: “geometry”,
stylers: [{ “color”: “#4e4e4e”}]
},
{
featureType: “road.local”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#616161”}]
},
{
featureType: “transit”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#757575”}]
},
{
featureType: “water”,
elementType: “geometry”,
stylers: [{ “color”: “#000000”}]
},
{
featureType: “water”,
elementType: “labels.text.fill”,
stylers: [{ “color”: “#3d3d3d”}]
}
],
{name: ‘Styled Map’});
var map = new google.maps.Map( document.getElementById(’em-map’), {
zoom: 14,
center: em_LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [ google.maps.MapTypeId.ROADMAP, ‘styled_map’]
},
mapTypeControl: false
});
map.mapTypes.set(‘styled_map’, styledMapType);
map.setMapTypeId(‘styled_map’);

But the map is still the same with the classic skin, instead of being on the Dark Skin.

Anyone can help ?

(I replaced event-manager.js and event-manager.min.js on the FTP)

Thank you all

@ismaildedicated Can you open a new thread for your issue? This one is nine months old and may contain things not relevant to newer versions of the plugin. Thanks.