Bounce animation on marker click on a Google Map

[{"_1":2,"_385":-5,"_386":-5},"loaderData",{"_3":4},"routes/example.$slug",{"_5":6,"_258":259,"_383":384},"post",{"_7":8,"_9":10,"_11":10,"_12":13,"_16":17,"_18":17,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_30":31,"_35":36,"_37":36,"_38":39,"_40":41,"_43":44,"_45":46,"_169":170,"_201":202,"_254":255},"id",12480,"date","2016-12-03T12:07:33","date_gmt","guid",{"_14":15},"rendered","http://demos.flippercode.com/googlemaps/?post_type=example&p=12480","modified","2023-02-23T11:54:30","modified_gmt","slug","bounce-animation-marker-click-google-maps","status","publish","type","example","link","https://static.wpmapspro.com/example/bounce-animation-marker-click-google-maps/","title",{"_14":29},"Bounce animation on marker click on a Google Map","content",{"_14":32,"_33":34},"

The WP Google Map plugin allows you to add a bounce marker animation, which can be triggered when the marker is clicked. This animation gives your map a fun and interactive element by allowing users to see when they have clicked on a marker. And creating an improved visual experience when navigating your map.

Bounce markers are a type of navigation tool that can be used to help users find their way around. The icon will move up and down until the user selects another marker or closes the info window. With this type of marker, users can easily locate places with minimal effort.

Maps Example

\n","protected",false,"featured_media",0,"parent","template","","topic",[42],3,"yoast_head","\nBounce animation on marker click on a Google Map | Wpmapspro.com\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\n","yoast_head_json",{"_27":47,"_48":49,"_50":51,"_61":62,"_63":64,"_65":47,"_66":49,"_67":26,"_68":69,"_70":71,"_72":73,"_74":75,"_84":85,"_86":87,"_88":89,"_92":93},"Bounce animation on marker click on a Google Map | Wpmapspro.com","description","In this article, we’ll help you set the effect as Bounce animation on marker click on a Google Map. Plugin allows you to customize Google maps for any needs!","robots",{"_52":53,"_54":54,"_55":56,"_57":58,"_59":60},"index","noindex","follow","max-snippet","max-snippet:-1","max-image-preview","max-image-preview:large","max-video-preview","max-video-preview:-1","og_locale","en_US","og_type","article","og_title","og_description","og_url","og_site_name","WP Maps Pro","article_publisher","https://www.facebook.com/flippercodepvtltd","article_modified_time","2023-02-23T11:54:30+00:00","og_image",[76],{"_77":78,"_79":80,"_81":82,"_23":83},"width",1469,"height",800,"url","https://static.wpmapspro.com/wp-content/uploads/2023/12/wp-maps-pro-banner.png","image/png","twitter_card","summary_large_image","twitter_site","@weplugins","twitter_misc",{"_90":91},"Est. reading time","1 minute","schema",{"_94":95,"_96":97},"@context","https://schema.org","@graph",[98,120,136,152],{"_99":100,"_101":26,"_81":26,"_102":47,"_103":104,"_106":107,"_108":73,"_48":49,"_109":110,"_112":113,"_114":115},"@type","WebPage","@id","name","isPartOf",{"_101":105},"https://static.wpmapspro.com/#website","datePublished","2016-12-03T12:07:33+00:00","dateModified","breadcrumb",{"_101":111},"https://static.wpmapspro.com/example/bounce-animation-marker-click-google-maps/#breadcrumb","inLanguage","en-US","potentialAction",[116],{"_99":117,"_118":119},"ReadAction","target",[26],{"_99":121,"_101":111,"_122":123},"BreadcrumbList","itemListElement",[124,131,135],{"_99":125,"_126":127,"_102":128,"_129":130},"ListItem","position",1,"Home","item","https://static.wpmapspro.com/",{"_99":125,"_126":132,"_102":133,"_129":134},2,"Examples","https://static.wpmapspro.com/example/",{"_99":125,"_126":42,"_102":29},{"_99":137,"_101":105,"_81":130,"_102":138,"_48":139,"_140":141,"_114":143,"_112":113},"WebSite","https://www.wpmapspro.com","#1 WordPress Plugin For Google Maps","publisher",{"_101":142},"https://static.wpmapspro.com/#organization",[144],{"_99":145,"_118":146,"_150":151},"SearchAction",{"_99":147,"_148":149},"EntryPoint","urlTemplate","https://static.wpmapspro.com/?s={search_term_string}","query-input","required name=search_term_string",{"_99":153,"_101":142,"_102":154,"_81":130,"_155":156,"_163":164,"_165":166},"Organization","WePlugins","logo",{"_99":157,"_112":113,"_101":158,"_81":159,"_160":159,"_77":161,"_79":161,"_162":154},"ImageObject","https://static.wpmapspro.com/#/schema/logo/image/","https://www.wpmapspro.com/wp-content/uploads/2023/12/weplugins3final-IconJPEG.jpg","contentUrl",1080,"caption","image",{"_101":158},"sameAs",[71,167,168],"https://twitter.com/weplugins","https://www.linkedin.com/company/flipper-code-pvt-ltd-/","_links",{"_171":172,"_176":177,"_180":181,"_184":185,"_188":189,"_195":196},"self",[173],{"_174":175},"href","https://static.wpmapspro.com/wp-json/wp/v2/example/12480","collection",[178],{"_174":179},"https://static.wpmapspro.com/wp-json/wp/v2/example","about",[182],{"_174":183},"https://static.wpmapspro.com/wp-json/wp/v2/types/example","wp:attachment",[186],{"_174":187},"https://static.wpmapspro.com/wp-json/wp/v2/media?parent=12480","wp:term",[190],{"_191":40,"_192":193,"_174":194},"taxonomy","embeddable",true,"https://static.wpmapspro.com/wp-json/wp/v2/topic?post=12480","curies",[197],{"_102":198,"_174":199,"_200":193},"wp","https://api.w.org/{rel}","templated","_embedded",{"_188":203},[204],[205],{"_7":42,"_25":206,"_102":207,"_19":208,"_191":40,"_43":209,"_45":210,"_169":236},"https://static.wpmapspro.com/topic/markers/","Markers","markers","\nMarkers - WP Maps Pro\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n",{"_27":211,"_48":212,"_50":213,"_61":62,"_63":64,"_65":211,"_66":212,"_67":206,"_68":69,"_74":214,"_84":85,"_86":87,"_92":216},"Markers - WP Maps Pro","Learn powerful ways to use map markers in your web or mobile application. Discover how to create interactive maps and leverage them for business!",{"_52":53,"_54":54},[215],{"_77":78,"_79":80,"_81":82,"_23":83},{"_94":95,"_96":217},[218,223,227,232],{"_99":219,"_101":206,"_81":206,"_102":211,"_103":220,"_48":212,"_109":221,"_112":113},"CollectionPage",{"_101":105},{"_101":222},"https://static.wpmapspro.com/topic/markers/#breadcrumb",{"_99":121,"_101":222,"_122":224},[225,226],{"_99":125,"_126":127,"_102":128,"_129":130},{"_99":125,"_126":132,"_102":207},{"_99":137,"_101":105,"_81":130,"_102":138,"_48":139,"_140":228,"_114":229,"_112":113},{"_101":142},[230],{"_99":145,"_118":231,"_150":151},{"_99":147,"_148":149},{"_99":153,"_101":142,"_102":154,"_81":130,"_155":233,"_163":234,"_165":235},{"_99":157,"_112":113,"_101":158,"_81":159,"_160":159,"_77":161,"_79":161,"_162":154},{"_101":158},[71,167,168],{"_171":237,"_176":240,"_180":243,"_246":247,"_195":252},[238],{"_174":239},"https://static.wpmapspro.com/wp-json/wp/v2/topic/3",[241],{"_174":242},"https://static.wpmapspro.com/wp-json/wp/v2/topic",[244],{"_174":245},"https://static.wpmapspro.com/wp-json/wp/v2/taxonomies/topic","wp:post_type",[248,250],{"_174":249},"https://static.wpmapspro.com/wp-json/wp/v2/example?topic=3",{"_174":251},"https://static.wpmapspro.com/wp-json/wp/v2/docs?topic=3",[253],{"_102":198,"_174":199,"_200":193},"terms",{"_40":256},[257],{"_7":42,"_102":207,"_19":208,"_48":-7,"_191":40},"mapData",{"_260":261,"_262":263,"_265":266},"req_map_id","47","selected_css",{"_264":-5,"_5":-5,"_129":-5},"infowindow","wpgmp_local",{"_267":268,"_269":-5,"_270":271,"_272":273,"_274":275,"_276":34,"_277":278,"_279":280,"_281":39,"_282":39,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":34,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":273,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382},"source","rest","language","apiKey","AIzaSyDz4Xap1p0E2w0nZ7u2sBEsDgrjGNycK04","urlforajax","https://static.wpmapspro.com/wp-admin/admin-ajax.php","nonce","f30c953bc2","wpgmp_country_specific","wpgmp_countries",[],"wpgmp_assets","https://static.wpmapspro.com/wp-content/plugins/wp-google-map-gold/assets/js/","days_to_remember","wpgmp_mapbox_key","map_provider","google","route_provider","openstreet","tiles_provider","OpenStreetMap.Mapnik","use_advanced_marker","true","set_timeout",100,"debug_mode","select_radius","Select Radius","search_placeholder","Enter address or latitude or longitude or title or city or state or country or postal code here...","select","Select","select_all","Select All","select_category","Select Category","all_location","All","show_locations","Show Locations","sort_by","Sort by","wpgmp_not_working","not working...","place_icon_url","https://static.wpmapspro.com/wp-content/plugins/wp-google-map-gold/assets/images/icons/","wpgmp_location_no_results","No results found.","wpgmp_route_not_avilable","Route is not available for your requested route.","image_path","https://static.wpmapspro.com/wp-content/plugins/wp-google-map-gold/assets/images/","default_marker_icon","https://static.wpmapspro.com/wp-content/plugins/wp-google-map-gold/assets/images/icons/marker-shape-2.svg","img_grid","","img_list","","img_print","","hide","Hide","show","Show","start_location","Start Location","start_point","Start Point","radius","Radius","end_location","End Location","take_current_location","Take Current Location","center_location_message","Your Location","driving","Driving","bicycling","Bicycling","walking","Walking","transit","Transit","metric","Metric","imperial","Imperial","find_direction","Find Direction","miles","Miles","km","KM","show_amenities","Show Amenities","find_location","Find Locations","locate_me","Locate Me","prev","Prev","next","Next","ajax_url","no_routes","No routes have been assigned to this map.","no_categories","No categories have been assigned to the locations.","mobile_marker_size",24,"desktop_marker_size",32,"retina_marker_size",64,"exampleId",47,"actionData","errors"]

Bounce animation on marker click on a Google Map

Build Customizable Maps Now