Tagged: CSS, custom, function.php, google map, html, marker
-
AuthorPosts
-
October 2, 2017 at 6:28 pm #859322
Hello,
I would like to change the marker on the Google map for a custom marker, and a custom size. I know that, I can change it and insert/upload a custom marker, but what I want to have is a much larger marker. Right now it’s being forced to be 40×40, but I want it to be 212×149.What do I need to do to change the overall size of the marker? 80×80 is simple not big enough for what I want. Plus even though I put the setting to 80×80 it only displays 40×40 (got MacBook 15″ retina).
Could you please help me solve my issue? Thanks.
// Morten.
October 2, 2017 at 10:50 pm #859420Hey NGdesign6,
Please provide a link to the page/site in question so we can look into this further.
Best regards,
Jordan ShannonOctober 3, 2017 at 8:02 am #859489Hello Jordan,
Here you can see an example of what I mean: Example
As you can see it’s very tiny (you have to scroll down a bit). I tried changing the CSS of the pin and the image within from 40×40 to the sizes that I want 212×149, but nothing happens, the image stays the same. It seems like it’s locked to the specific size of 40×40. Also I’m running it with a child-theme, so that I am still able to do updates without clearing out code, when an update should be available.
- This reply was modified 7 years, 1 month ago by NGdesign6.
October 3, 2017 at 11:36 am #859588the easiest way would be to edit the shortcode google_maps.php in shortcodes folder
on array id imagesize you have to insert one line:since line 118:
array( "name" => __("Custom Map Marker Image Size", 'avia_framework' ), "desc" => __("How big should the marker image be displayed in height and width. ", 'avia_framework' ), "id" => "imagesize", "type" => "select", "std" => "40", "required" => array('marker', 'not', ''), "subtype" => array( __('20px * 20px', 'avia_framework' ) =>'20', __('30px * 30px', 'avia_framework' ) =>'30', __('40px * 40px', 'avia_framework' ) =>'40', __('50px * 50px', 'avia_framework' ) =>'50', __('60px * 60px', 'avia_framework' ) =>'60', __('70px * 70px', 'avia_framework' ) =>'70', __('80px * 80px', 'avia_framework' ) =>'80', __('200px * 200px', 'avia_framework' ) =>'200', ),),
how to use shortcodes on child-theme:
create a subfolder on your child-theme called shortcodes
insert this to your functions.php of your child-theme:add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }
then the new uploaded shortcode will be active – and not the parent shortcode
btw: i dont know if all those custom-markers get the class: gmnoprint
but if you want this image an alternative to the bubble you can get rid of click event by:.gmnoprint { pointer-events: none; }
October 3, 2017 at 12:51 pm #859605Thank you Guenni007. I’ll try it out, when I get home.
So no matter what the images has to be square?
- This reply was modified 7 years, 1 month ago by NGdesign6.
October 3, 2017 at 5:56 pm #859697i think – no – just try it with other sizes. The only thing is if you want a marker placed it has to be a png – and a somewhat looking pointer (arrow etc)
October 3, 2017 at 6:57 pm #859739Hello again Guenni007,
I tried to do what you mentioned earlier, but it doesn’t seem to work.
1. I added this to functions.php in the child-theme:add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }
2. I created the “shortcodes” folder inside the child theme.
3. I added the entire “google_maps.php” inside the “shortcodes” folder. And added the code inside the “google_maps.php” at the right place as you said.
Inside the page in the admin area I can see that 200×200 has been added, but when I choose that, nothing happens on the live google maps for that page. It just keeps the 40×40 dimensions with no change, and even if I go with the inspector all the way into the css and change it to something bigger like 200×200 the image stays at 40×40, nothing changes. The marker/pin just keeps the same size.
- This reply was modified 7 years, 1 month ago by NGdesign6.
October 3, 2017 at 7:30 pm #859753did you empty your caches ! (Browser Cache and if used minify or super cache plugins cache)
https://webers-testseite.de/googlemap/
- This reply was modified 7 years, 1 month ago by Guenni007.
October 3, 2017 at 7:45 pm #859760I just cleared my cache. Still the same. :S Does it have anything to do that my screen is a macbook retina?
October 3, 2017 at 7:50 pm #859764The link you sent me is the same for me. Only 40×40 I see.
October 3, 2017 at 7:58 pm #859768Agh give me a moment. I think it might be cloud cache.
October 3, 2017 at 8:26 pm #859781Hey Guenni007,
I have cleared the cache on the server, the website, and in my browser, but nothing changed. I still just get the 40×40.
October 3, 2017 at 10:28 pm #859803and why can i see your testsite working?
https://www.westend.com/shopping/savile-row/alexander-mcqueen/#category-mapOctober 3, 2017 at 11:07 pm #859817aha now i see what the problem is – the image is bigger but it takes the 80×80 thumbnail as source.
On line 466 of our google_maps.php you can see:
$image = wp_get_attachment_image_src($shortcode['attr']['marker'], 'thumbnail'); change it to: $image = wp_get_attachment_image_src($shortcode['attr']['marker'], 'fullsize');
it will than take the original uploaded image ! But you have to insert it on googlemaps options again.
Tip if you don’t want a square – gave to the png more transparency on top
October 5, 2017 at 5:42 pm #860668Hello Guenni007,
Sorry it has taken me some time to get back on this. I have done everything that you have written, but I still don’t see any difference. I still only see the 40×40 image size. Eventhough I have change it to the 200×200 inside the admin area and added “fullsize” to the php file.
I tried in all three major browsers Chrome, Safari and Firefox. It’s all the same. :S
October 5, 2017 at 7:20 pm #860724by the way i found it a bit unpolite to have some questions concerning to a website and supress right mouse button.
i can see on your example page that the full-size image is taken:
https://www.westend.com/wp-content/uploads/westend_london_alexander_mcqueen_pin-1.png
i told you to make a png square which has on top more transparency. click on the png above on https://kriesi.at/support/topic/google-map-marker-custom-resize/#post-859817
thats allI think more explanation is not possible – so you now have to wait for a mod – give them your backend data.
So they could do it for you. You see on my site that it works this way!- This reply was modified 7 years, 1 month ago by Guenni007.
October 6, 2017 at 4:04 am #860813October 11, 2017 at 10:01 pm #863034again : you have to upload an image in that quality you like to optain.
your image now is 80px x 80px – as our code did – he takes the full-size image but than scaled it up to the given 200px x 200pxsee your source code : (click to enlarge)
your image (full-size) what you used for it is: https://www.westend.com/wp-content/uploads/westend_london_pin-1.png
so upload a sqaure image ( a png – must not be centered but obviously had to be square) bigger than 200×200 and take that for your marker !
October 11, 2017 at 10:31 pm #863038Hey Guenter,
Thanks for the input.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.