on click event google map markers to open data-toggle=modal data-target=

Home Forums Porto – Responsive HTML5 Template on click event google map markers to open data-toggle=modal data-target=

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10016366
    Laurence Cooper
    Participant

    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.


    #10016375
    Support
    Keymaster

    I’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


    #10016379
    Laurence Cooper
    Participant
    // 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>

    #10016386
    Support
    Keymaster

    Hello, 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


    #10016393
    Laurence Cooper
    Participant

    Hi 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.


    #10016404
    Support
    Keymaster

    Hello, 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


Viewing 6 posts - 1 through 6 (of 6 total)

This topic is marked as "RESOLVED" and can not rceive new replies.