Google map round pin before putting on map - javascript

Hi there I tried googling extensively but nothing seems to help.
This is my scenario:
Company logos are stored on an external domain/url (rectangular in shape).
Ionic application with a google map that places these logos as markers onto the map.
The markers look ugly and I want to make them round on the map.
I have found that if I add css to the entire page to say:
img { border-radius: 50%; }
Then it rounds the images but also rounds the map background. I cannot specify the image url to style in css as each logo url will be different. How can I achieve this via javascript alone or how can I assign a css class to each map pin?
EDIT: Just to specify, I added such a generalized css styling because when I inspect the element then the map pin is part of the canvas and does not show up for me to inspect. As mentioned above I would love to assign a css class to the pin so that I can target it directly.

You can create custom markers, using your own images..
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom
And try here:
https://m.youtube.com/watch?v=ZtNrt9vRt10
That should get you started..

#MikeCave's suggestion is great. I especially like this because high resolution screens will display markers better since Google Maps is constricting about multiple resolutions.
As the comment above, you need to be more specific if you're going to apply a general rule to all images like that. You can specify iframe img to get more specific since Google Maps puts the map inside an iframe. Better yet, check out this answer to see about adding a class name to markers for better targeting.

I was able to achieve this with the plugin MarkerWithLabel. Then by placing the image in as a label under the marker I could hide the marker by defining the icon url as an empty string and then placing the image url into the label, the label then has a css class that I could manipulate via css.

Related

How can a put a static picture over Google Dynamic Map?

I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.

How to use google map marker one image over another as marker

I searched a lot over internet but did not find correct solution for the problem. i have to display marker on google map using lat long . I have two images to display as marker one image will work as background and another small image will display over it how can i do this.I am using javascript map api for this.
Note: i can't use photoshop to make these two image as one
There is a Google maps utility library called RichMarker that allows you to use HTML DOM as markers. Using HTML and CSS you can embed your images.
Here is demo of the utility.
You might be able to implement the solution provided here
https://stackoverflow.com/a/1782662/1109352
You will be using imbedded CSS instead

Custom google maps not working

I want to use a custom google maps on my website but I'm not able to do it.
I'm trying to copy this custom google map:
But on my website I can't see the address nor the +- buttons. I downloaded the files and copies the html, css and js on my code but it's not working.
Link to my website: The map is at the bottom.
Does anyone knows why?
Thanks a lot!
If you set display none to the sidebar-wrapper element you can see them.
Your map width is 100% and the symbols + and - are behind your sidebar.
Just try to adjust he positioning of this elements (or reducing the size of the map, for example) and it will work.

Is there a way to make embedded Google Maps a static non clickable image?

Unfortunately, on a site that I'm working on, the StreetView image of the business premises is out of date and not very flattering of the business.
Is there any way to make (via the Maps API) the map image a static image, which doesn't link to the full Google Maps page showing the StreetView image?
I'm trying to avoid manually embedding an image as I want to be able to do this programmatically.
Thank you.
Prembo.
I found a really simple solution to this, in my case I wanted an interactive map on desktop and a static map on mobile.
Using media queries I added the attribute {pointer-events: none !important;} to the parent div wrapping my map when changing to mobile.
Yep, take a look at the static maps api. There is an example of exactly what you need.
https://developers.google.com/maps/documentation/staticmaps/
You could style the map so it can't scroll, zoom, street view... etc.
https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Google Maps APIĀ : Display a digit in a GMarker

How can I display a digit inside the GMarker ?
I used title, but it is only on rollover like title on links or image.
Do you have any idea how I can do that ?
There's two ways to do it.
The old way is to create or obtain images for markers with each number and use them as custom icon images. There are several sets listed here or you can use one of the services listed there to create your own, or draw your own with an image editor. Save the resulting images to your own webspace, don't try to use the services dynamically because they occasionally fail.
The new way is to use the LabeledMarker extension which creates things that work something like Google markers but allow you to put text onto the marker dynamically. (Hint: works quite nicely with MapIconMaker, like this.)
You can create custom markers with mapicon Factory. Select the Characters radio button and pick a character type, and then click the Numbers checkbox. Dismiss the ad and you will see the markers.

Categories