Home › Forums › Porto – Responsive HTML5 Template › on click event google map markers to open data-toggle=modal data-target=
- This topic has 5 replies, 2 voices, and was last updated 7 years, 8 months ago by Support. This post has been viewed 3394 times
-
AuthorPosts
-
July 26, 2016 at 7:12 pm #10016366Laurence CooperParticipant
I have been working on the Google Map Markers coding you have created which again works great. My issue is that I have tried to change the way the marker works and open up the modal Info pop up. How do I change your code for an on click event that will action this from the Map marker in google maps
I am sorry to ask because all the normal routes I have tried keep failing and I am not sure why I cannot attach the marker code as your panel does not allow this.
July 26, 2016 at 11:26 pm #10016375SupportKeymasterI’m sorry, but I’m not quite sure what you mean – can you please provide some more details? Please send me an example to show what you mean.
Kind Regards,
Jonas
July 27, 2016 at 1:14 am #10016379Laurence CooperParticipant// Markers $("#googlemapsMarkers").gMap({ controls: { draggable: (($.browser.mobile) ? false : true), panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true }, scrollwheel: true, markers: [{ latitude: 37.37508, longitude: -1.62954, html: "<a href="http://murciatoday.com/aguilas-beaches-playa-de-los-cocedores_26132-a.html?Banner=52,113&bespoke=true&fid=206&signup=off#breadcrum" target="blank_">Click here<br><strong>Playa de los Cocedores</strong></a>", icon: { image: "img/beach-flag.png", iconsize: [46, 46], iconanchor: [3, 20] } },
This is your map marker code. I would like this marker to open as a data toggle as data-toggle=\”modal\” data-target=\”#playa-casica\”
This is the modal box
<div class="modal fade" id="playa-casica" tabindex="-1" role="dialog" aria-labelledby="playa-casica" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <li> <div class="portfolio-item center"> <a href="http://murciatoday.com/aguilas-beaches-cala-de-la-tortuga_25749-a.html?Banner=52,113&bespoke=true&fid=206&signup=off#leftcol" target="blank_"> <span class="thumb-info thumb-info-preview thumb-info-preview-long mb-md"> <span class="thumb-info-wrapper"> <img src="http://murciatoday.com/images/articles/25749_guilas-beaches-cala-de-la-tortuga_1_large.jpg" /> </span> </span> <h5 class="mb-xs">Águilas <br /><SPAN style="color: #12a69c; font-size: 24px;line-height: 27px;">Cala de la Tortuga</span></h5> <p class="font-size-xs line-height-xs">Please Click Here</p> </a> </div> </li> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
July 27, 2016 at 3:47 am #10016386SupportKeymasterHello, please try this:
$("#googlemapsMarkers").gMap({ controls: { draggable: (($.browser.mobile) ? false : true), panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true }, scrollwheel: true, markers: [{ latitude: 37.37508, longitude: -1.62954, html: "<a data-toggle='modal' data-target='#playa-casica'>Click here<br><strong>Playa de los Cocedores</strong></a>", icon: { image: "img/pin.png", iconsize: [46, 46], iconanchor: [3, 20] } }] });
Don’t forget to put the modal content in the HTML and make the style of it.
Kind Regards,
Jonas
July 27, 2016 at 6:16 pm #10016393Laurence CooperParticipantHi thanks for the code. Yes this works if you want to toggle from inside the pop up info box when you click “click here”.
What I was trying to do was operate this toggle from the fist click on the flag. So I do not need the Info box to open at all. Click on the red flag and the toggle box opens.
Please see the page map http://murciatoday.com/microsite/murcia-beaches/aguilas-beaches.html to see the red flag markers.
Thanks for your help.
July 27, 2016 at 11:55 pm #10016404SupportKeymasterHello, unfortunately we don’t have an example of that on Porto and that question is a bit beyond from what support can offer, but you can find some ways to do that, here’s an example I found:
I hope that helps.
Kind Regards,
Jonas
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.