Google Map on a wordpress site. Can't figure out how to put a customized icon for placemark - wordpress

I have a wordpress website. I've embedded a map on the contacts page. How can I put a customized logo as a placemark in that map? I am fairly new to this and would like to know how to do this.

Just simply add a div over the map with a customized logo.

Have you added a marker to the map?
You can see the example from Snazzy Map (view source code of their example) https://snazzymaps.com/download-example/1
Then add the url of your customized icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-39, 700),
map: map,
icon: "http://yoursite.com.au/wp-content/uploads/your-marker.png",
title: 'Anything you want!'
});
I am pretty sure there are other ways, but that's how I did mine.

Related

javascript jquery google translation in website . doesnot translate google map and marker infobox

I have included google translation script in our website. The page is automatically translated. But google map and the marker , infobox title is not translated . please help me how to translate google map marker , also some images based on the language selection.
Thanks
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'jp',includedLanguages: 'en,jp', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

Google maps fully zoomed in all the time

I have a wordpress site with WP-bakery(visual composer) and have embedded a google map with an API key. Suddenly the map is fully zoomed in all the time. I try to change the scale in WP-bakery widget but it will not show right on homepage. Ex: www.admemo.net
In your script you should be able to change the zoom value like so :
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15
});

Create one slider for every wordpress page with the title's page with revolution slider

I would like to create a slider for every page of my website with the title of this page in it. I would like to do this without create a slider for each page, is it possible to do this automatically? To charge the title page automatically in the revolution slider?
Thanks :)
You could try it like this:
1.) Add a layer to the slider that will contain the title.
2.) Under "Advanced Parameters", give that layer an ID, for example #MyLayerID.
3.) Add a jQuery code that changes the value of the element with that ID with the title of the current page, something like:
$(document).ready(
function() {
var title = jQuery(this).attr('title');
$('#MyLayerID').text(title);
}
);
Regarding the title - site name question:
You can try this:
title=title.substr(0,title.lastIndexOf("-"));

Multiple product views in WooCommerce with rollovers

I am developing an ecommerce site with WooCommerce and I'm trying to add multiple product views that when clicked or on hover, replace the main image. The stock code opens the thumbnails attached to the post in fancy box, which I don't prefer. I have looked all over and found only a couple of plugins that come close but are still far away from my desired effect.
What I am looking for, ideally, is a plugin or code I can add to my functions that when you rollover a thumbnail it replaces the main image with the new one. If that isn't possible, I need it to at least replace it when clicked.
Any help is extraordinarily appreciated.
I found this http://www.magictoolbox.com/magiczoomplus/ and it handles what I needed. I just set the zoom to inner so it doesn't open a zoom window and it has thumbnail hover that replaces the main image. Maybe this could help someone with a similar issue.
Honestly I don't see why you need a plugin to do this at all, regular javascript/jQuery will work just fine.
$( ".smallImage" ).hover(function() {
var smallSrc = $(this).attr("src");
$( "#bigImage" ).attr("src", src );
}, function() {
// Code here for mouse out
}
);

how to share image on facebook and open image as lightbox

i want to share image on facebook i have set following code
var obj = {
method: 'feed',
link: 'http://cwsv2.lokpunjab.org/PhotoGallery/facebookimage.aspx?imageurl=("ContentPlaceHolder1_DataListUploadedPhotos_ImageUploaded_0").src.toString().replace("LargeThumbs/", "")',
///how to set link so on clicking image it will open as lightbox in facebook
<br> picture: document.getElementById("ContentPlaceHolder1_DataListUploadedPhotos_ImageUploaded_0").src.toString().replace("LargeThumbs/", ""),
name: 'CWS Photo Gallery',
<br> caption: caption12
};
i want to open image in facebook as facebook builtin lightbox but i dont know how to set
link in var obj
Fastest way I can think of is actually uploading the image to Facebook.
Then, the user will see it in their timeline, and when they click on it - it will be shown as you want it.

Resources