Adding info box pop up to marker in google maps

khm's picture
khm
Wed, 11/04/2015 - 02:45
#1
Adding info box pop up to marker in google maps

Hi

The maps marker is clickable but nothing happens when you try to click it. I would like to add a pop-up box with information on company, address, phone number etc. Have found a description at google but this method does not work in your tailored script. Can you pls tell me what needs to be added and where?

Thanks!

phuonght's picture
phuonght
Fri, 11/06/2015 - 02:19

To add info box:

- Open file views-view-field--field-webform-location.tpl.php (md_max/templates/views/contact)

- Below line 37 ( map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);), insert the following code:

var contentString = '<div>+ 'Your custom HTML : Your company Info'
+ '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});

You also could take a look at: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

for customizing infobox.

khm's picture
khm
Fri, 11/06/2015 - 03:36

I tried to insert above code below line 37 and the map went blank. 

I tried the solution at https://developers.google.com/maps/documentation/javascript/examples/inf...

before reporting the problem but it did not work. Hence my question re. how to do it :)

Thanks

phuonght's picture
phuonght
Fri, 11/06/2015 - 05:59

Please check your map.

To change your information:

- Open views-view-field--field-webform-location.tpl.php (md_max/templates/views/contact)
- Edit information at line 63 - "Your custom HTML : Your company Info"

     var contentString = '<div class="content">'
+ 'Your custom HTML : Your company Info'
+ '</div>';
khm's picture
khm
Fri, 11/06/2015 - 06:09

Awesome, thanks VERY much! :)

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.