POSTED IN Javascript Jquery Laravel

Trigger google map marker from outside of map laravel

Trigger google map marker from outside of map laravel

In this tutorial we are going to see how to trigger google map marker from outside of map in laravel. When I was surfing ecommerce site, I have seen few of sites used google map to place based on product locations. On hover product they will trigger the map marker and open the pop up window with product details. Its looks cool and user freiendly too. The I have made few research about google map multiple markers and how to trigger google map from outside the map.

Lets see how to achieve this.

step 1 : Register google map key and use it in your script

Goto and register your unique key

Step 2 : Collect products locations in array

Step 3 : Call your locations in google map script and load in you map container


My map.blade.php

My Script 

My css

How to trigger Marker outside of map

In above I have added my javascript code to place a map
During the initialisation of marker I have created the custom array as markers and stored all markers in my custom array. It will store based on index value.

In the same way I have listed my products and given index in data attribute.

On hover product I will collect data attribute informations and trigger the map marker like below

   google.maps.event.trigger(markers[index], ‘click’); //This is the main function to trigger google map


Thats it. This is basic example hope it will help some to achieve something complex works.