Ask your WordPress questions! Pay money and get answers fast! (more info)

Geo Mashup plug-in: Styling markers with CSS WordPress


I've got my map set up and working, and I've customized it to use a small version of the post's featured image as the map marker (I did this using the method described here:

Now I want to style these using CSS (to make them round and give them a border) - how do I do that?

I'm guessing I need to use the StyledMarker library from here: - but I'm at a loss on how to do that code-wise.

Here's the code I've got so far for using the featured image in my custom.js:
// Enable Featured Image Markers
GeoMashup.addAction( 'objectIcon', function( properties, object ) {
// Use a special icon, post's thumbnail
object.icon.image = object.lundici_marker.replace(/\\/g, "");
object.icon.iconSize = [ 50, 50 ];
object.icon.iconAnchor = [ 25, 25 ];
object.icon.iconInfoWindowAnchor = [ 25, 0 ];
} );

Oh, and I'm using google maps api v3.


Answers (3)


Dylan Kuhn answers:

This might be fairly challenging. I don't have a method that I know works, but I can point you at some things to try.

The StyledMarker library doesn't look to me like it handles custom images. [[LINK href=""]]RichMarker[[/LINK]] looks more hopeful to me.

You'll need the [[LINK href=""]]the geo_mashup_render_map hook[[/LINK]] to enqueue whatever javascript library you use. For third party libraries call wp_register_script() instead of GeoMashup::register_script() call used in the example.

Finally you'll need to replace the native Marker objects with objects made using the library. Something along these lines might work:

(function( $ ) {
var google_markers = [];

GeoMashup.addAction( 'marker', function( properties, marker ) {
google_markers.push( marker.proprietary_marker );
} );

GeoMashup.addAction( 'loadedMap', function( properties, mxn ) {
var google_map = mxn.getMap();

$.each( google_markers, function( i, google_marker ) {
// Use the library to make a custom marker
// and replace the default marker with it
} );
} );
}( jQuery ));


Arnav Joy answers:

can you show url of your site?

jpdavidson comments:



Hariprasad Vijayan answers:


I think we can't make google map marker icon/image round using CSS. Please check the following thread.


<blockquote>I'm guessing I need to use the StyledMarker library from here: </blockquote>
Here it perform like

var marker = new google.maps.Marker({
position: new google.maps.LatLng(10.012552,76.327043),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeColor: '#531C36',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#531C36',
fillOpacity: 0.35,
strokeColor: '#531C36'

Creating circle for markers and this is not processing based on image.