Map not displaying when address is geocoded using Geocomplete - google-maps

My issue is when users enter their address (with autocomplete), the expected behaviour is that the map would display a marker on the address. But for some strange reason, the map does not display :(
Here is where my test environment is, please have a look:
http://mycanprev.com/onboard-test/
Click on the "Location" tab to get to the geocomplete portion. When you enter your address, it's suppose to display the map with the marker set on the entered address but it just displays a gray box instead of the map.
The map seems to display fine on mobile though.
I think the issue might be with the z-index, but I'm not sure how to fix it :(
Thanks for your help.

There's a lot of issue that caused the gray box in the maps. You can try this following solution:
First, make sure that you used the correct Google Maps API, valid API Key and not deprecated function calls.
Setting the zoom parameter correctly. Check this SO question 11749742 and 5838333.
Check the size of your maps DIV element and css. Check this SO question for that.

Related

Remove "Google map" dashed border

i am not fluent in js and Html, i am trying to fix the map on our website that shows dashed border :
And the actual map look like this (on google map) :
There is a political issue and google shows the map without border(dashed) to users inside Morocco and show the other map to the rest of the world users, we need to fix this as 90% of the target users on our website are from Morocco.
I have tried to fix it using this method :
https://daker.me/2017/08/fix-morocco-borders-on-google-maps-2017-version.html
But either the map vanish or no changes, the original map code :
http://pasted.co/46e7141b
I also tried to change the Google Map API domain from google .com to .co.ma
Please if there is any solution i would like to fix this as soon as i can, thank you in advance.
This sounds like something that you may not be able to change, but some of the styling of the map certainly can be altered. Google has a great tool here you can check out to investigate with:
https://mapstyle.withgoogle.com/
Further details can be found here:
https://developers.google.com/maps/documentation/javascript/styling
Use region=MA query parameter in your API calls, see localization docs,
and demo.

Google map zoom parameter in url not working

Why doesn't google map z (zoom) parameter work inside the url?
I' ve searched over so I got few solutions for sending zoom parameter in google map url but based on the old posts (stackoverflow) which deal with the zoom level within the url it seems that this functionalities do not work anymore.
I've used the following z parameter but it's not working:
http://maps.google.com/?q=38.6531004,-90.243462&z=12
Below is the link where they have mentioned z parameter for zoom level
link
For those who do not want to read,
this works (z range:[1-20]):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
There is no documentation that covers this problem. However, there are few hacks.
The link that you have provided,
URL (stackoverflow):What parameters should I use in a Google Maps URL to go to a lat-lon?
Will not help you with getting the desired google maps zoom level inside a url
The following examples which have been working for quite a while DO NOT WORK anymore (they work but without getting the desired zoom level)
Examples:
http://maps.google.com/?q=38.6531004,-90.243462&z=3
http://maps.google.com/?q=38.6531004,-90.243462&zoom=3
http://maps.google.com/maps?q=Scottish+Rite+Hamilton+ON&loc:43.25911+-79.879494&z=15
Instead, you can get the zoom level easily by trying the following examples:
https://www.google.com/maps/#38.6531004,-90.243462,9z
https://maps.google.com/?ll=40.7060471,-74.0088901&z=3
(Note: after clicking on google maps you will get a gray marker which appears and quickly disappears)
However the above URL's will not give you a static pinpoint for the specified lat&long.
There is a "hack" on how to get a fixed pinpoint (red marker pin) and that is by giving the q attribute (represents the search query) and the II attribute(latitude and longitude of the map centre point) along with the z (zoom attribute)
Example (with the OP coordinates):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
If you want to change the zoom level just change the value of 'z'.
After searching the web I found that only this website:
https://moz.com/blog/new-google-maps-url-parameters
deals with google maps parameters/attributes/arguments, where things actually still work. If anyone want's more functionalities within the url, then this is the site to check.
Zoom intervals explained (https://developers.google.com/maps/documentation/static-maps/intro#Zoomlevels):
The following list shows the approximate level of detail you can
expect to see at each zoom level:
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings
This works as of 5 Aug 2018
http://www.google.com/maps/place/<lat>,<lng>/#<lat>,<lng>,<zoom>z
For example
http://www.google.com/maps/place/49.46800006494457,17.11514008755796/#49.46800006494457,17.11514008755796,7z
As of 04/2020 ...."because google is always changing and evolving"
In complement to Eugen Sunic comments above, and an alternative update to the Solution.
When Logged in to google and getting map data from the google generator, it is not the same as copying the URL from the browser window (which my may be manipulated to load different zooms trough the various alterations, html, Css and script tricks).
But in the below, keep in mind that Your address info may need to be part of the google array of database, eg you have some address map info linked to your account, images, business name, etc. or not... maybe just typed in for a quick map search with a pin-point... the later I don't know.
Also the below is not some Google API pay per 1k clicks thing, which is more geared to the commercial development end of google tracking heat maps, etc. So if you just need a simple solution and certain zoom and marker to work..then you might try the below.
When logged in too your Google account (maybe not) and showing your location marker on the map screen...
Choose the zoom detail of the map you want to appear in your web page. eg Whole US, State views, City, Street (by clicking the + or - zoom feature).
Then go to the hamburger menu to the left, and look down the list for "Share or Embed Map" and the popup window should load the same zoom level of the map! Do not try to change the zoom in the popup window feature, it wont work to change the link code but will change the pop up windows zoom of the map. In short, the embedded link code is preset and will not change in the popup.
Above this popup window of the map there will be two options at the top (Share and Embed) button/link selections.
Click on the Embed link/button and it should generate the code for the zoom you previously chose.
Lastly, copy the code, paste it into your web page and TEST!
As far as I can tell, There is no altering this code as the others suggested above, changing(z=3, 9z, etc) as the code is entirely different. But it will allow you to get the zoom you need "if the google code generator or procedure does not change".
But the zoom level was altered and good enough for me when I figured the process out. Changing it to other zooms is another can of code.

Why is iwloc=near hiding entire google map instead of juts the address bubble?

When I change the "iwloc=A" property to "iwloc=near" in my Google map embed code (to remove the address bubble), the entire map disappears! Anyone else experience this or might know why??
Recently also faced this problem. Try iwloc=addr.

IE8 Google Maps setZoom error

I am having trouble getting the setZoom method for Google Maps to work correctly in IE8 on this site: www.savingthedream.org. The map is supposed to zoom on each pin drop when it is placed, and it is specifically IE8 that is not working. I panTo the pin drop right before setting the zoom, and it is panning correctly. Any help would be greatly appreciated.
Thanks
Just make sure the parameter is a number and it has a valid value.
You maybe want to check your parameter with typeof and parse it in need.
map.setZoom( parseInt(YOUR_ZOOM_LEVEL) )

Simple geocoding example that loads an arbitrary address

All the "simple examples" of geocoding load a hard-coded long/lat pair and then, after the map is displayed, they load the arbitrary user-supplied address. Unfortunately for me, this means the hard-coded location always appears first and then the map shifts to the user-supplied address. What I'd like to find out is how to geocode an arbitrary address first, then initialize the map to the location in one step, so that when the map appears on the screen it is already showing the correct location.
I've been unable to deduce how this could be done from the API docs, however. All the examples show "new google.maps.Map()" being called prior to geocoding and it appears you have to already have a location to create the map, so it's impossible to geocode before displaying the map. On the other hand, it seems to me this would be the most common way to use a google map, so surely there's some way to do it?
Is this possible and does anyone have an example they could point to? Thanks!
If I understood you correctly, I created a simple page here
http://jsfiddle.net/4QGKq/1/
There's a hardcoded human readable address in the HTML ("Sardegna")
The geocoder figures out LatLng from Sardegna
Map is created and centered there.
To change the default map center, change the address in the Source HTML panel, not the textbox, then click on the blue "Run" button.