Title: Locations Map Customization
Last modified: September 1, 2016

---

# Locations Map Customization

 *  Resolved [hgj](https://wordpress.org/support/users/hgj/)
 * (@hgj)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/locations-map-customization/)
 * Thank you for a great plugin!
 * I noticed a glitch today, on a single location map there is no problem to customize
   both map style and marker. But on a location**s** map there is no way to modify
   the marker, style is no problem, but the hook doesn’t accept marker changes.
 * Is there any easy way to add this functionality?
 * [https://wordpress.org/plugins/events-manager/](https://wordpress.org/plugins/events-manager/)

Viewing 3 replies - 16 through 18 (of 18 total)

[←](https://wordpress.org/support/topic/locations-map-customization/?output_format=md)
[1](https://wordpress.org/support/topic/locations-map-customization/?output_format=md)
2

 *  [ekko848](https://wordpress.org/support/users/ekko848/)
 * (@ekko848)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/locations-map-customization/page/2/#post-8227452)
 * 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": 'http://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 9 years, 7 months ago by [ekko848](https://wordpress.org/support/users/ekko848/).
 *  [ismaildedicated](https://wordpress.org/support/users/ismaildedicated/)
 * (@ismaildedicated)
 * [9 years ago](https://wordpress.org/support/topic/locations-map-customization/page/2/#post-9136394)
 * 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
 *  [caimin_nwl](https://wordpress.org/support/users/caimin_nwl/)
 * (@caimin_nwl)
 * [9 years ago](https://wordpress.org/support/topic/locations-map-customization/page/2/#post-9136659)
 * [@ismaildedicated](https://wordpress.org/support/users/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.

Viewing 3 replies - 16 through 18 (of 18 total)

[←](https://wordpress.org/support/topic/locations-map-customization/?output_format=md)
[1](https://wordpress.org/support/topic/locations-map-customization/?output_format=md)
2

The topic ‘Locations Map Customization’ is closed to new replies.

 * ![](https://ps.w.org/events-manager/assets/icon-256x256.png?rev=1039078)
 * [Events Manager - Calendar, Bookings, Tickets, and more!](https://wordpress.org/plugins/events-manager/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/events-manager/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/events-manager/)
 * [Active Topics](https://wordpress.org/support/plugin/events-manager/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/events-manager/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/events-manager/reviews/)

 * 18 replies
 * 6 participants
 * Last reply from: [caimin_nwl](https://wordpress.org/support/users/caimin_nwl/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/locations-map-customization/page/2/#post-9136659)
 * Status: resolved