Google Map Marker in ver 5.2.5

I have a google map on my site, with the old version of cornerstone, and using the old shortcode it has the option of a marker, but with the new one (version 5.2.5), it has no such option. I’ve tried to add it with JavaScript:

$(’#googlemap’).children().first().children().first().prepend(’<div style=“position:absolute; left: 50%; top:50%;transform: translate(-50%,-50%); z-index: 1000000;”><img src=“images/mapmarker.png” style=“width:32px”></div>’);

This works in a testing environment (when I have the code generated by cornerstone for the map and add it all manually to a blank html page with the code above added into a script tag), but doesn’t work when running in cornerstone, I do use the full link for the image location, it’s just not adding the element at all. Is there any support for this, or am I just being completely stupid and there is a well hidden easy way to add the marker?

Hi There,

Thanks for writing in! You can still place the old shortcode inside a Text element. Refer to the shortcode guide here (http://demo.theme.co/integrity-1/shortcodes/map/).

Hope that helps.

I’m wanting to import JSON for the map, is it possible with this? If so how?

Hey There,

That is technically possible. However, that would fall beyond the scope of our support since it would require custom development.

Thank you for understanding.

Therefor I don’t understand why the new improved element for Map doesn’t include the Map Marker as an option, when the Classic Google Map element does? Is there any plans to update this element to include the options for a map marker implementation? If not, can you let me know if there is any script running with the map element that could be blocking the above script that I’ve put on from working?

Hi There,

Still we don’t have any planning to implement map maker option in Version 2. In future it may be in our road map. But we can’t promise you right now.

Regarding the script issue, there no other script which will block the code. Please check with any third party plugin script.

Thanks

I found a reason why my script may not be working, when naming the map element, it names 2 elements with the same id, the element with classes: el35 x-map x-map-google, and the element with classes: el35 x-frame x-frame-map-google, both get the id which is set to the map element in cornerstone. I’ll continue developing my script, I maybe able to get it to work.

Although I tried to add it manually by putting in a raw html element, and copying the full element from chrome: - outerHTML of <div class=“el35 x-frame x-frame-map-google”>, this still didn’t work, when viewing the site in cornerstone and as a live site it stripped the <div style=“position:absolute; left: 50%; top:50%;transform: translate(-50%,-50%); z-index: 1000000;”><img src=“images/mapmarker.png” style=“width:32px”></div>… Any idea why it’d strip this out?

Hey There,

An ID must be unique. In Cornerstone, there is no duplicate IDs, only the class is used multiple times.

Adding any code in raw content element should be displayed as in and no code should have been removed. The code:

<div style="position:absolute; left: 50%; top:50%;transform: translate(-50%,-50%); z-index: 1000000;"><img src="images/mapmarker.png" style="width:32px"></div>

were not displayed in the live page because the map element may not have the correct ID. Please take note that your JS code should be this:

(functions($){
  $('#googlemap').children().first().children().first().prepend('<div style="position:absolute; left: 50%; top:50%;transform: translate(-50%,-50%); z-index: 1000000;"><img src="images/mapmarker.png" style="width:32px"></div>');
})(jQuery);

A certain map element should be present on the page and that element must have an ID of googlemap so that the JS code will take effect.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.