Canvas Support

Use lat/long for Google Maps & Multiple markers

1 reply · opened Sep 16, 2020

BburaksansalSep 16, 2020

Hi,

I have some questions regarding Maps. I'm trying to make a google maps page with multiple markers in different categories..

  1. I want to place multiple markers (6+) on the Map. Is it possible to use lat/long data for markers instead of address? I need to use lat/long because I have to pinpoint the exact accurate location on the map, not just the city of Sydney but maybe a building in one of the streets. And can I associate the content for each marker when it pop ups (information when I click that marker)? And can I associate each marker with a different icon (i.e. Plane, Boat, Red arrow, Blue arrow, etc)? How the syntax would be for all this?

  2. Is it possible to read the lat/long and content from an external txt file (on the same server)? So when I want to edit, add or remove any place I can work only on the data file, not on the html file.

  3. I have different categories for markers (30+) on the Map, for example Airports, Hotels, Restaurants, Shopping Malls etc. Is it possible to put them in the page in a list with a box, and the associated markers will show on the map only when the appropriate box is ticked? For example if I want to see just the Airports I tick the "Airports" box, or if I want to see only Hotels and Shopping Malls then I tick these 2 categories and their markers will show in the map..

Thank you very much in advance.

SSemicolon WebSTAFFSep 17, 2020

Hello,

Thanks for your Patience!

  1. Absolutely! Simply use latitude/longitude instead of address to display markers on the Specific Lat/Long. Additionally, it is also possible to use different Icons for different markers. Consider checking this example:
    [ch_pre]data-markers='[{latitude: 1,longitude: 1,html: "Melbourne, Australia",icon: {image: "one-page/images/icons/map-icon-red.png",iconsize: [32, 32],iconanchor: [14,44]}},{address: "Sydney, Australia",html: "Sydney, Australia",icon: {image: "demos/burger/images/svg/hamburger-marker.svg",iconsize: [40, 36],iconanchor: [40,36]}}]'[/ch_pre]

Essentially, this is a more readable version of the code:
[ch_pre][
{
latitude: 1,
longitude: 1,
html: "Melbourne, Australia",
icon: {
image: "one-page/images/icons/map-icon-red.png",
iconsize: [32, 32],
iconanchor: [14,44]
}
},
{
address: "Sydney, Australia",
html: "Sydney, Australia",
icon: {
image: "demos/burger/images/svg/hamburger-marker.svg",
iconsize: [40, 36],
iconanchor: [40,36]
}
}
][/ch_pre]

But you will need to compress it as above.

  1. It is possible. You can consider using JSON in the Text File and then use AJAX to store the value of the File in a JS Variable to set as the Marker Settings. However, since this requires Customization, you will need to do this manually.

  2. Currently, the Maps Shortcode provided is not equipped to work with these kind of layouts and you will need to do Extensive Customizations based on the Google Maps API.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Use lat/long for Google Maps & Multiple markers · Canvas Template Support