I have this site here that I built for a client but the Google Maps API is not working correctly. If you go to the site, click the contact us link in the nav bar. You will see the map not showing, then if you just reload the page two or three times the map will show.
I copied and pasted the exact link from Google into my HTML file, with the API key that they gave me. I also borrowed a file called gmaps.js, which you can search for on Google, and implemented the map in my javascript file with the following code:
/* MAPS */
new GMaps({
div: '.map',
lat: 42.2803784,
lng: -83.7301047
});
The github repo is public and can be viewed here:
https://github.com/seanrobenalt/cosasabrosa
The problem doesn't seem to be too complicated but I can't figure it out. Hoping somebody is willing to take a look...
Related
Is the integration between highmaps and google sheets not working?
It seems to have broken on a map I've been working on and in the process of debugging I can't seem to find one that is working. For example heading to this page: https://www.highcharts.com/maps/demo/data-class-two-ranges (or on the jsfiddle linked from that page)
it simply shows "Loading data from Google Spreadsheets"
It's not working. There is an open ticket on the github here.
https://github.com/highcharts/highcharts/issues/8202
I run a website with a number of custom Google Maps built in (showing various locations on a map after a search or generating directions to/from a location). I use Google Maps Javascript API for this. My users have started reporting that on iOS 10, these maps no longer respond to touch events -- they cannot pinch-to-zoom nor can they click on the "pins" on the map to open the location info balloons.
I've been searching all over for others who have had this issue to no avail. I found one StackOverflow question here (http://webcache.googleusercontent.com/search?q=cache:DaiSdOgD0U4J:stackoverflow.com/questions/39401974/google-maps-javascript-doesnt-pan-or-zoom-in-ios-10+&cd=3&hl=en&ct=clnk&gl=us), but it was downvoted, then deleted. (Why?) A fresh search today still shows that page, but it leads to a 404, making a search even more frustrating.
Has anyone else experienced this? Is this a bug within the Google Maps API? I certainly can't find anything about that on their Developer website. Am I possibly doing something very wrong to lead to this? The code has worked for years and hasn't been modified in a few months now, so nothing changed on our end.
We do use an API key in our requests
I've tried switching from the
current release version (3.25) to the current experimental version
(3.26) with no changes in functionality.
Users report this happens in at least both Safari and Chrome on iOS 10
Just hoping someone can provide any insight at all on the issue.
Ok here is how I did to fix this issue.
As a reminder i'm using AngularJS via the Ionic framework.
I was calling the map this way in my index.html :
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=true"></script>
It seams like signed_in feature of google map is adding a layer on the map that is not letting the map getting the X,Y of your screen touch position.
I just replaced by false to disable the signed_in feature and its working like a charm
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=false"></script>
I'm developing an app whit phonegap (cordova). This app includes a google map with some markers.
The app also has more pages as a list of comerces…
The map shows correctly, but when I change the page, and back to the map page, sometimes the map is displaced and the info windows not open correctly.
Is there any way to put a map and it appears correctly when changing pages?
And I have also seen that the map consuming a lot internet data.
Could someone make me a suggestion?
I hope someone can help me!!
Thanks, and excuse me for my bad english.
I had similar problems with google maps and cordova. I was using jquery-mobile and sometimes if you switch between pages the maps wasn't loaded properly. You can check out different page events and try to "resize" the maps. I was also playing with different version of cordova and jquery-mobile. This could help as well.
$(document).on("pagebeforeshow","#pagetwo",function(){
google.maps.event.trigger(map, 'resize');
});
best
M
The WordPress theme I am using has built in JavaScript and CSS for Google maps on the contact page. So, I'm guessing there is conflicting code. I can't seem to find where the conflict is when I am trying to use a plugin which also uses Google Maps.
I would really appreciate any help correcting this issue so that this Google Map will display instead of an empty gray box. I tried everything I know to do.
http://boothambuilders.com/service-area/
The plugin works on all other themes I'm using.
Also, this is the only page where the background doesn't display properly. I don't know how it is related to the issue.
It is not a CSS conflict, you are calling the Google Maps API twice...
I try to manage some changes at the code of Joomla Module file that show a google map to get it working center automatically on user location:
i found on the google documentation this script write in Google maps api V3 for geocode that works great standing alone and seems to be very accurate. See it on this page: http://www.urbanclaim.com/new.php
i already have this problem: (you can see it using the link above)
after a user click on for sharing his location, never changes in the module's map. i try to put an alert in the code ang give me a null value for the local coordinates.. someone of you can help me with a debug in firebug o give me an advice on this?
i SOLVED it..this site is really useless.
In your javascript you are looking for a element with the ID of location but I do not see the element in the DOM nor do I see it being added by your JavaScript, once I added a element with that ID to the DOM via FireBug, your code worked for me.