Enhance your Divi website google map with styles. The Divi Custom Map Extended Module is designed to work with any Divi Builder based site with advanced features.
If you are looking to enhance your Google Map experience in Divi such as marker animation, map styles, marker clustering, marker listing or direction, then this is for you. Take a look at the demo below and see what the Divi Map Extended can do and help you in your Project. This is just a beginning, as we are planning to add in more useful features.
Besides uploading your own custom image for makers, you can also set different pin color right inside Divi Map Extended. Easily set custom height and width for individual marker pins.
[et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.3659653012452″ address_lng=”103.95392741797″ map_height=”400px” _builder_version=”3.9″ _i=”0″ _address=”2.0.1.0″][et_pb_map_pin_extended title=”Divi Web Design” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”2.0.1.0.0″]Upload your custom icon with just a few clicks![/et_pb_map_pin_extended][/et_pb_map_extended][et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.2799212211088″ address_lng=”103.84430047813″ map_height=”400px” _builder_version=”3.9″ _i=”1″ _address=”2.0.1.1″][et_pb_map_pin_extended title=”Sentosa” pin_address=”39 Artillery Ave, Singapore 099958″ pin_address_lat=”1.2505522″ pin_address_lng=”103.8273773″ _builder_version=”3.9″ _i=”0″ _address=”2.0.1.1.0″][/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Marina Bay Sands” pin_address=”10 Bayfront Ave, Singapore 018956″ pin_address_lat=”1.282302″ pin_address_lng=”103.8585308″ pin_fill_color=”#d0af6d” pin_circle_color=”#9b6a00″ _builder_version=”3.9″ _i=”1″ _address=”2.0.1.1.1″][/et_pb_map_pin_extended][/et_pb_map_extended]
[et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.3101666024027″ address_lng=”103.88893243613″ marker_auto_center=”on” map_options=”70″ map_height=”400px” _builder_version=”3.9″ locked=”off” _i=”0″ _address=”3.0.0.0″][et_pb_map_pin_extended title=”Divi Web Design” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”3.0.0.0.0″]Clicking on all these markers will auto center it.[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Sentosa” pin_address=”39 Artillery Ave, Singapore 099958″ pin_address_lat=”1.2505522″ pin_address_lng=”103.8273773″ _builder_version=”3.9″ _i=”1″ _address=”3.0.0.0.1″]Clicking on all these markers will auto center it.[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Marina Bay Sands” pin_address=”10 Bayfront Ave, Singapore 018956″ pin_address_lat=”1.282302″ pin_address_lng=”103.8585308″ pin_fill_color=”#d0af6d” pin_circle_color=”#9b6a00″ _builder_version=”3.9″ _i=”2″ _address=”3.0.0.0.2″]Clicking on all these markers will auto center it.[/et_pb_map_pin_extended][/et_pb_map_extended][et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.370084″ address_lng=”103.956674″ info_window=”on” map_type=”3″ map_height=”400px” _builder_version=”3.9″ title_font=”Montserrat|800|||||||” title_text_color=”#8300e9″ content_font=”Lato||||||||” content_text_color=”#595972″ locked=”off” _i=”1″ _address=”3.0.0.1″][et_pb_map_pin_extended title=”Divi Web Design” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”3.0.0.1.0″]You can even style the infowindow Title and Content! [/et_pb_map_pin_extended][/et_pb_map_extended]
Show your visitors stunning and beautiful Google Maps. Select 74 preload styles or create your own map styles from SnazzyMap or Google Map Styling Wizard and paste the JSON codes into Divi Map Extended.
Many marker pin options to choose from so that you can play around with to suit your needs. Options such as Trigger Method(On click or On Hover) for opening the InfoWindow, InfoWindow Width, Bounce Animation, Drop Animation on page load, Marker URL, Marker Label and opening all marker InfoWindow on load.
[et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.3659653012452″ address_lng=”103.95392741797″ info_window=”on” marker_label_all=”on” map_options=”15″ map_height=”480px” _builder_version=”3.9″ _i=”0″ _address=”4.0.1.0″][et_pb_map_pin_extended title=”Divi Web Design” marker_label_text=”Click me to open URL” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ marker_url=”https://diviwebdesign.com” marker_url_new_window=”on” pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”4.0.1.0.0″]Open InfoWindow On load.[/et_pb_map_pin_extended][/et_pb_map_extended][et_pb_map_extended address=”Singapore 510429″ zoom_level=”10″ address_lat=”1.4364323652154″ address_lng=”103.87588617149″ infowindow_styles=”custom_style” infowindow_close_color=”#111111″ info_window=”on” bounce_on_click_on_off=”on” marker_animation=”on” marker_label_all=”on” map_options=”62″ map_height=”480px” _builder_version=”3.9″ title_font=”||||||||” title_text_color=”#8300e9″ title_font_size=”17px” content_font=”||||||||” _i=”1″ _address=”4.0.1.1″][et_pb_map_pin_extended title=”Sentosa” pin_address=”39 Artillery Ave, Singapore 099958″ pin_address_lat=”1.2505522″ pin_address_lng=”103.8273773″ cover_image_src=”https://agrocro.be/wp-content/uploads/2019/10/woman-3377839_640.jpg” _builder_version=”3.9″ _i=”0″ _address=”4.0.1.1.0″]Bounce Animation on Click[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Airport” pin_website_text=”Website” pin_website_url=”https://diviwebdesign.com” pin_email_text=”Email” pin_email_url=”hello@diviwebdesign.com” pin_address=”Airport Blvd, Changi Airport Singapore (SIN), Singapore” pin_address_lat=”1.3644202″ pin_address_lng=”103.9915308″ cover_image_src=”https://agrocro.be/wp-content/uploads/2019/10/arcades-3428490_640.jpg” pin_fill_color=”#d0af6d” pin_circle_color=”#9b6a00″ _builder_version=”3.9″ _i=”1″ _address=”4.0.1.1.1″]Drop Animation on load[/et_pb_map_pin_extended][/et_pb_map_extended]
[et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.3458625776059″ address_lng=”103.86581284008″ marker_center=”off” marker_clustering=”on” marker_clustering_styles=”custom_style” marker_clustering_effect=”on” marker_clustering_pulse_color=”rgba(0,140,255,0.4)” marker_cluster_border_color=”#ffffff” marker_cluster_border_width=”5px” marker_cluster_hover_text=”#ffffff” marker_cluster_hover_bg=”#8300e9″ marker_cluster_hover_border_width=”5px” map_options=”73″ map_height=”400px” _builder_version=”3.9″ locked=”off” _i=”0″ _address=”5.0.0.0″][et_pb_map_pin_extended title=”Divi Web Design” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”5.0.0.0.0″][/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Sentosa” pin_address=”39 Artillery Ave, Singapore 099958″ pin_address_lat=”1.2505522″ pin_address_lng=”103.8273773″ _builder_version=”3.9″ _i=”1″ _address=”5.0.0.0.1″][/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Marina Bay Sands” pin_address=”10 Bayfront Ave, Singapore 018956″ pin_address_lat=”1.282302″ pin_address_lng=”103.8585308″ pin_fill_color=”#d0af6d” pin_circle_color=”#9b6a00″ _builder_version=”3.9″ _i=”2″ _address=”5.0.0.0.2″][/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Singapore Zoo” pin_address=”80 Mandai Lake Rd, Singapore 729826″ pin_address_lat=”1.4043485″ pin_address_lng=”103.793023″ pin_fill_color=”#8300e9″ pin_circle_color=”#ffffff” _builder_version=”3.9″ _i=”3″ _address=”5.0.0.0.3″][/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Singapore Changi Airport” pin_address=”Airport Blvd, Changi Airport Singapore (SIN), Singapore” zoom_level=”9″ pin_address_lat=”1.3644202″ pin_address_lng=”103.9915308″ _builder_version=”3.9″ _i=”4″ _address=”5.0.0.0.4″][/et_pb_map_pin_extended][/et_pb_map_extended]
The marker clustering is very useful if you have too many markers. You can apply clustering on your markers easily using this plugin. The marker clustering utility helps you manage multiple markers at different zoom levels. To be precise, the ‘markers’ are actually ‘items’ at this point, and only become ‘Markers’ when they’re rendered.
Marker Listing & FILTERING
Using the Marker Listing will display all your markers in a table list below your Map. Clicking on the relevant marker listing will also show up on the map with the ability to adjust map zoom. You can also style the listing.
Marker Category is the perfect way of segmenting your markers and allowing your visitors to show only certain types of markers on the map. Works nicely with Marker Listing.
[et_pb_map_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.2799212211088″ address_lng=”103.84430047813″ marker_center=”on” marker_center_zoom=”10″ show_marker_listing=”on” marker_filtering=”on” map_options=”71″ map_height=”500px” _builder_version=”3.9″ map_pin_address_content_thead_font=”||||||||” map_pin_address_content_font=”||||||||” _i=”0″ _address=”6.0.1.0″][et_pb_map_pin_extended title=”Sentosa” marker_filter_category_built_in=”13″ pin_address=”39 Artillery Ave, Singapore 099958″ pin_address_lat=”1.2505522″ pin_address_lng=”103.8273773″ _builder_version=”3.9″ _i=”0″ _address=”6.0.1.0.0″]
Content for Sentosa
[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Marina Bay Sands” marker_filter_category_built_in=”13″ pin_address=”10 Bayfront Ave, Singapore 018956″ pin_address_lat=”1.282302″ pin_address_lng=”103.8585308″ pin_fill_color=”#d0af6d” pin_circle_color=”#9b6a00″ _builder_version=”3.9″ _i=”1″ _address=”6.0.1.0.1″]
Content of Marina bay sands
[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Divi Web Design” marker_filter_category_built_in=”10″ pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”2″ _address=”6.0.1.0.2″]
Content for Divi Web Design Marker
[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Khatib Bongsu Park Connector” marker_filter_category_built_in=”12″ pin_address=”Yishun Avenue 6, Khatib Bongsu, Singapore 768959″ pin_address_lat=”1.4367303″ pin_address_lng=”103.8481058″ pin_fill_color=”#ba37f2″ pin_circle_color=”#ffffff” _builder_version=”3.9″ _i=”3″ _address=”6.0.1.0.3″]Content for Park[/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Airport” marker_filter_category_built_in=”10″ pin_address=”Airport Blvd, Changi Airport Singapore (SIN), Singapore” pin_address_lat=”1.3644202″ pin_address_lng=”103.9915308″ _builder_version=”3.9″ _i=”4″ _address=”6.0.1.0.4″]Content for Airport[/et_pb_map_pin_extended][/et_pb_map_extended]
Using the Google Map Direction will allow your visitors to search from their current location to the selected marker. Clicking on the location icon will get visitors’ current location and route to the selected marker with different mode of route such as Driving, Walking, Cycling and Transit. With text direction, visitors will have a clearer direction.
Note: Since this is in Singapore, I would suggest typing the address “Singapore Changi Airport” to see how direction route you through.
[et_pb_map_fullwidth_extended address=”Singapore 510429″ zoom_level=”11″ address_lat=”1.3879316125046″ address_lng=”103.8159116709″ info_window=”on” map_directions=”on” map_directions_text=”on” map_custom_style=”on” map_custom_code=”%91{%22featureType%22:%22all%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:%91{%22visibility%22:%22off%22}%93},{%22featureType%22:%22all%22,%22elementType%22:%22labels%22,%22stylers%22:%91{%22visibility%22:%22off%22}%93},{%22featureType%22:%22landscape%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#FBFCF4%22}%93},{%22featureType%22:%22poi.attraction%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#AA0000%22}%93},{%22featureType%22:%22poi.business%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#E3B919%22}%93},{%22featureType%22:%22poi.government%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#AA0000%22}%93},{%22featureType%22:%22poi.park%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#002FA7%22}%93},{%22featureType%22:%22poi.school%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#AA0000%22}%93},{%22featureType%22:%22road%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#0F0919%22}%93},{%22featureType%22:%22transit.line%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22saturation%22:-100}%93},{%22featureType%22:%22water%22,%22elementType%22:%22geometry.fill%22,%22stylers%22:%91{%22color%22:%22#CBEFEF%22}%93}%93″ map_height=”500px” _builder_version=”3.9″ _i=”0″ _address=”8.0″][et_pb_map_pin_extended title=”Divi Web Design” pin_address=”Singapore 510429″ pin_address_lat=”1.370084″ pin_address_lng=”103.956674″ pin_on_off=”on” pin_src=”https://agrocro.be/wp-content/uploads/2019/10/logo.png” _builder_version=”3.9″ _i=”0″ _address=”8.0.0″]Fullwidth Map Extended is included as well![/et_pb_map_pin_extended][et_pb_map_pin_extended title=”Bird Park” pin_address=”2 Jurong Hill, Jurong Bird Park, Singapore 628925″ pin_address_lat=”1.3187065″ pin_address_lng=”103.7064417″ _builder_version=”3.9″ _i=”1″ _address=”8.0.1″]Content for Bird Park[/et_pb_map_pin_extended][/et_pb_map_fullwidth_extended]
