Google map loads only if I resize the browser window - javascript

I´m working on a google maps implementation and it works fine so far. To try things and play around with it I made an extra file for that.
Here you can checkout the map: Google maps file
I have everything ready in that file and I want to implement that to my website. I took the code and copied it to my "main-file".
Now, the google-map won´t load in the first place, only if I resize the browser or write something in the text field.
The browser doesn´t give me any errors back.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap&language=de">
This Code-Sample is on the end of my <body>-tag. I know that google-map needs to load async, but I´m not realy sure what it is, because - I´m a beginner...
Can anyone give me a hint why the map is acting like that?
All javascript-files that are needed are implemented.

Google maps seem to be showing without resizing the window though.
If it's not showing, try adding "resize" event trigger on map load. It is the same event for window resizing.
function initMap() {
var map = new google.maps.Map(document.getElementById('newjobmap'), options);
google.maps.event.trigger(map, "resize");
}

Related

Google maps is not 100% Loaded when you start Android . (not always)

I have a problem with a map that contains a geo-location, directions and markers. The map is the start screen which is directly shown after the app launches. I want the map to show geolocation (position) and markers, but i have to reload it (ripple emulator), to see what i want. After the app launches, the map is clear and no geolocation or markers are shown.
I think the script may not load to 100%, sometimes it works without giving me this problem.
I use cordova, initialize the map in this classic way bottom script:
google.maps.event.addDomListener(window, 'load', initialize);
and to call :
<div id="map-canvas"></div>
API and script and I put the code on the top of the page.
Apparently it does not work at all, in the device map does not load the function or disappear when you "zoom " and runs very slowly

Cordova problems with google map

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

Adsense Google MAP API not showing up the MAP

I am following this link to create Adsense on GMAP https://developers.google.com/maps/documentation/javascript/examples/ads-adunit
But when i implemented it on my website only ads and some part of MAP only highlighted, I also tried to debug the view from the firebug tool but not found any hidden property or error. The same code i have implemented.
pastebin.com/AbEEExSa
Since it shows grey color in the map-canvas, it seems to be a refresh problem. This can be solved by triggering the resize of the Google maps.
google.maps.event.trigger(map, "resize");
Try adding this line after the completion of adunit API(success callback of this API).
FYI:
resize : Developers should trigger this event on the map when the
div changes size: google.maps.event.trigger(map, 'resize').
Updates:
I tried using the code that you have pasted in codebin, removing the php and parts that you have commented. It is working. I'm not sure what your php code does. So try debugging like in the fiddle.

Conflict with Google maps V3 API and MooTools

I'm have a conflict with Google Maps v3 API and Mootools. For some reason when the page where the maps is on is loaded it looks fine but about 10 seconds later the map disappears as well as all but 1 pin point.
You can see it here: http://goo.gl/Sr0b2
If I remove mootools.js which loads in my footer, the problem goes away but then some of the javascript on my WordPress theme doesn't work such as the drop down menu in the header so removing mootools is not an option.
Anyone know what may be causing the conflict and how I can fix it?
Any help is appreciated.
I solved the problem by using an iframe for the map, this way the mootools.js on the page doesn't affect the map script. I usually don't use iframes but in this situation it doesn't affect the site's SEO or anything else and it's a perfect solution. So if you have this same issue you can load the map on a page of its own (with nothing but the map) and then insert it anywhere with

How can i center this Google map on user local position?

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.

Categories

Resources