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.
Related
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.
I am trying to encode the example more simple of map following the manual (https://developers.google.com/maps/documentation/javascript/examples/map-simple) and not get see no map, although not get error.
The page is this: http://www.acuarelasmbt.com/mapa and is developed with wordpress CMS.
Could someone lend me a hand?
Your map is coming just need to add some width and height css to that div which is holding the map
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.
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
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