Is there a way to create a custom map marker for Google Maps by combining two images, marker_bg and marker_pic? I want the marker_bg to be a marker with empty space inside that will be filled by marker_pic.
How can I round the picture and set it into the marker?
The technologies I am using include:
Here is an example of how you can achieve this:
var marker = new google.maps.Marker({
map: MAP_INSTANCE,
position: LOCAIOTN,
visible: true,
icon: ICON_PATH
});
By using SVG icons and updating the image path to the user's image path, you can customize the markers.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="80" height="80"
xlink:href="[USER_ICON_PATH]" />
</svg>
You can also use PHP to generate different SVG images for different users.
<?php
$url = 'http://lorempixel.com/200/200/';
echo '<svg width="216" height="216">
<defs>
<rect id="rect" x="8" y="8"width="200" height="200" rx="50%"/>
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect" stroke-width="8" stroke="black"/>
<image xlink:href="' . $url . '" width="100%" height="100%" clip-path="url(#clip)"/>
</svg>';
?>
If you want to see a working example, check out this JSFiddle link.
UPDATE: I have added a PHP example as well.
UPDATE: Links to JSFiddle examples have been included in the answer.
If you happen to have this, why not experiment with adding 2 layers of markers? Layer 1 could be a PNG image without a background, while layer 2 could involve an avatar image placed in the same location or in a different one for aesthetic reasons.
Take a look at something like this:
Here's some code to help you get started:
function setMarker(avatarUrl, position){
(function(avatarUrl, position){
var markerLayer1 = new google.maps.Marker({
map: map,
position: position,
icon : 'url image for layer 1'
});
var markerLayer2 = new google.maps.Marker({
map: map,
position: position,
icon : avatarUrl
});
})(avatarUrl, position);
}
Finally, I have successfully completed it. A huge shoutout to @jad-panda for the guidance that enabled me to bring this creation to life. Even though you may not have fully understood my vision, I managed to achieve it by leveraging your code. You can view the full code here: jsfiddle
<svg width="500" height="500">
<defs>
<rect id="rect" x="10%" width="80%" height="80%" rx="50%"/>
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect"/>
<image xlink:href="http://lorempixel.com/200/200/" width="80%" height="80%" x="10%" clip-path="url(#clip)"/>
<image xlink:href="http://i61.tinypic.com/5zk09e.png" width="100%" height="100%"/>
</svg>
The positioning of the images is dependent on the frame dimensions, so if there are any changes in the frame, adjustments to the x and y coordinates of the image may also be necessary.
I am a newcomer to the world of Ionic Framework. Recently, I created a page that features a swipe-back-button located on the left side of the navigation bar. This positioning causes the title to shift slightly to the right, as demonstrated by the addition ...
Check out this code snippet I wrote: <html> <head> <script> initialize = function(){ document.getElementById('generate').onclick = sendRequest("generator.php"); } ...
I'm having trouble implementing the following: Showing a conditional voucher on the order confirmation page. The voucher depends on two specific conditions: the weight of the order and whether the user has an account Currently, I am working on the f ...
I have a goal to create a search filter box that triggers an API call to update items in a ListView. As the user starts typing, I want to immediately display a loader on top of the ListView items and dynamically update the text in the search filter using c ...
Query : Is there a way to easily convert the JSON format shown below? Original Format : [ {"u0":{"user_id":"124", "name":"Eloise R. Morton"}}, {"u1":{"user_id":"126", "name":"Mary S. Williams"}} ] Desired Format : { "u0":{"user_id":"124", "name":"Elo ...
I need help figuring out how to insert an image into a Bootstrap panel (see attached image): https://i.sstatic.net/BHQI9.jpg Here is the HTML Code I am using: <div class="panel panel-default col-md-10 col-md-offset-1"> <div class="panel-bod ...
Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...
I’m currently facing an issue where my custom CSS rules are not being applied after linking Bootstrap in my project. I am using Bootstrap CSS for a custom layout and need to incorporate my own styling as well. When I link bootstrap.min.css followed by m ...
I'm currently using JavaScript to display an error message If a user inputs incorrect information and I add the following code: <?php $_POST["usernamereg"] ?> = usernamereg; the alert function stops working. However, if I remove this code, t ...
I've been attempting to apply certain CSS properties to my forms, but for some reason, they're not taking effect when I move the properties to the parent HTML element. Although the CSS properties added directly to the .input class are working as ...
I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...
I'm looking to incorporate animations similar to this example into the background of the page below. However, I'm unsure how to achieve this using Bootstrap 5. The image provided above is what I envision as the background for my HTML page. Any gu ...
I am in the process of developing a responsive image viewer and have decided to incorporate the Smooth Zoom Pan plugin for enhanced pan/zoom functionality. Within my layout, I have two primary panels: the viewer container and a controls container that are ...
As a newcomer to three.js, I'm still figuring things out and may be treading familiar ground with this query. Here's the situation: I've got an external .txt file that lays out the x, y, z positions for 256 atoms. The opening lines of said . ...
template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...
I'm attempting to implement a redirect on each page based on a specific condition using Next.js middleware. Strange enough, when the matcher in middleware.ts matches a page, all props retrieved from getServerSideProps for that page end up being undef ...
Imagine this scenario: What if instead of adjusting the browser window size to showcase a responsive web design, we could load the site into an IFRAME with the dimensions of a mobile screen. Could this concept actually work? Picture having an IFRAME like ...
Visit this WordPress site where the client has a unique setup with multiple pages showcasing images one after another. To achieve the desired layout, jQuery is utilized to wrap each image in a div element with a class of .postImg: Here's the script: ...
As someone who is new to exploring Material UI components, I encountered a roadblock while experimenting with different features. <TextField type="email" name="email" id="email" label="Email" variant="outlined" color="secondary" required /> <D ...
For a while now, I've been trying to create my own custom component but it's not working as expected. The interaction seems fine, but for some reason, it only renders the last item in the arrays. export default class MyComponent extends Comp ...