Geo Mashup plug-in: Styling markers with CSS WordPress
- SOLVED
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: http://wordpress.org/support/topic/plugin-geo-mashup-custom-marker-post-thumbnail).
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: https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries - 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.
Thanks!
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="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html"]]RichMarker[[/LINK]] looks more hopeful to me.
You'll need the [[LINK href="https://code.google.com/p/wordpress-geo-mashup/wiki/PhpApi#geo_mashup_render_map"]]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 ));
Hariprasad Vijayan answers:
Hello,
I think we can't make google map marker icon/image round using CSS. Please check the following thread.
http://stackoverflow.com/questions/15180724/can-a-google-map-marker-show-a-circular-version-of-a-square-custom-image-as-the
And
<blockquote>I'm guessing I need to use the StyledMarker library from here: https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries </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.