I've done a lot of searching for this issue, and found a lot of results but none that seem to help in this case. I setup a google map a while ago and it worked. Then with out me changing anything it stopped working in chrome & opera, but still worked in IE and chrome for android. The other day I replaced it with fresh code and got it working again in all browsers, but now I notice it is no longer working in chrome & opera, but works fine in IE and chrome for android. What the devil is going on?
<div id="map-canvas" style="width:100%; height:300px; max-width: 100%;"></div>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<? echo $lat; ?>, <? echo $long; ?>);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Hello world"
});
//marker.setMap(map);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
I will add that I am using twitter bootstrap 2.x on this project in case that has a bearing.
This was an issue with Cloudflare's Rocket Loader. I'm awaiting a fix from CF.
Related
How is it possible to use the Google Maps API with AngularJS?
I am using this code in my AngularJS app:
<style>
#googleMap {
width: 200px;
height: 200px;
}
</style>
<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script language="javascript">
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This code is in the view and not in the controller.
I have other functions in the view and they work, but google map is still not working.
This is the error I get in the browser console:
Error: google is not defined
#http://localhost:3000/js/jquery-1.11.2.min.js line 2 > eval:10:2
.globalEval/<#http://localhost:3000/js/jquery-1.11.2.min.js:2:2615
.globalEval#http://localhost:3000/js/jquery-1.11.2.min.js:2:2589
.domManip#http://localhost:3000/js/jquery-1.11.2.min.js:3:23105
.after#http://localhost:3000/js/jquery-1.11.2.min.js:3:21067
Cehttp://localhost:3000/js/angular/lib/angular.min.js:176:70
n#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:5868
.compile/http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:6428
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:128:120
p#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:2649
this.$gethttp://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:3989
f/<#http://localhost:3000/js/angular/lib/angular.min.js:112:20
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:125:301
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:122:390
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:126:56
l#http://localhost:3000/js/angular/lib/angular.min.js:81:169
S#http://localhost:3000/js/angular/lib/angular.min.js:85:301
vf/http://localhost:3000/js/angular/lib/angular.min.js:86:315
What am I doing wrong?
I searched the web but everyone seems to be using libraries like angular-google-map or ui-map. Why is no one using the direct API?
You can implement google maps in angularjs without using any plugins like this,
<!--use this div where ever you want to create a map-->
<div id="map"></div>
define the width and height for map div,
#map {
height:420px;
width:600px;
}
in controller you glue this id="map" with scope like this,
$scope.mapOptions = {
zoom: 4,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);
if you want to create markers for the cities or countries you want,
var cities = "Atlanta, USA";
var geocoder= new google.maps.Geocoder();
$scope.markers = [];
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat(), info.lng())
});
}
geocoder.geocode( { 'address': cities }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newAddress = results[0].geometry.location;
$scope.map.setCenter(newAddress);
createMarker(newAddress)
}
});
Last but not least make sure you added the google maps api script before doing all this stuff,
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
Here is the working plunker with this code, inside a bootstrap model,
http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview
Reference
Hope this helps!
It was late to post but I have done this as solution. By this there is no need to add the google map script src in the head of the html or there is no chance of any error for google map src related errors. The script will be added automatically by the loadScript function. In angular it is needed to add new js src in partials rather than the head of main script. So I think this will be the best solution
I used this code chunk into my controller.
$scope.initialize = function() {
$scope.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
};
$scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
}
$scope.loadScript = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(script);
setTimeout(function() {
$scope.initialize();
}, 500);
}
setTimeout is there because some time is needed for google map src to be downloaded and be ready. & callback=initialize is needed because by this google map will be ready for a callback.The main problem was that the code google.maps.event.addDomListener(window, 'load', initialize) was not executing if I add the google map src in partial rather than the head of main index.html. But this setup works flawlessly.
And this chunk to the html
<div class="form-group col-lg-12" id="googleMap">
<center>Waiting for the map...</center>
</div>
Now place ng-init="loadScript()" anywhere in any outer div so that loadScript initializes before.
I'm clueless as to why this won't run on my mobile browser but it will run on my PC browser, chrome to be exact.
Could any of you provide feedback.
Link to the server I'm testing this on:
54.172.35.180/chat/chatlist.php
<script type="text/javascript">
function success(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
});
}
google.maps.event.addDomListener(window, 'load', navigator.geolocation.getCurrentPosition(success));
</script>
I originally just copied and pasted the code from the API site and it worked fine but as soon as I started pulling GPS data it stopped working on my mobile device's browser. Any help would be appreciated.
navigator.geolocation.getCurrentPosition doesn't return a position. So you can't use that result as a parameter of addDomListener(window, ...
What it does, is send a request. When that request is ready, a callback is triggerd. In that callback you can trigger your function success() (I named it initialize).
Just to show what's going on.
You can still choose if this is a good way to proceed.
Feel free to rename, extend, ...
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize(position, accuracy) {
var latlng = position || new google.maps.LatLng(50.45, 4.45); // set your own default location. This gets called if the parameters are left blank.
var myOptions = {
zoom: 15,
center: latlng
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if (position) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "You are here! (at least within a " + accuracy + " meter radius)"
});
}
else {
// position of the user not found
}
}
function locationFound(position) {
initialize(
new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
position.coords.accuracy
);
}
function locationNotFound() {
initialize(null, null);
}
function page_loaded() {
// the page is loaded, we can send a request to search for the location of the user
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
}
google.maps.event.addDomListener(window, 'load', page_loaded);
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<div id="map-canvas"></div>
Probably it's a better idea to first load a map and set a default location.
When the location is found, you change the center and set the marker.
Notice now: if the location is not found, it takes quite a long time before locationNotFound is called
I am dynamically loading content into a page and one of the pages has a google map point. Everything works fine except map point doesn't show up. Map api is loaded asynchronously so if I understand it correct it should work.
Example taken from official google's documentation
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
</script>
<div class="joomsport-event-location">
<div class="map" id="map-canvas" style="height: 50%"></div>
<script>
loadScript();
alert('loading'); // test if it's called
</script>
</div>
This is source that is loaded into another page using jQuery. And once loaded I get expected alert. Am I missing something ? Or it's not even possible what I am trying to do?
google map api，chrome and firefox is right，but ie can't run
I use jquery load initialize();
ie6 outpute error message is
error 'google' undefine
function initialize() {
var latlng = new google.maps.LatLng(39.979639,116.30209);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
$(document).ready(function(){
initialize();
});
You’re not actually calling the map initialisation function. You’d need to do something like:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
But of course without that it wouldn’t work anything else either… Is the version of IE you’re testing in IE6? It’s not officially supported by Google Maps anymore.
I'm trying to create a Google Map on a div that it's generated dinamically and IE fails to load correctly the map and throws an error while loading all the elements "unknown error at line 25 of main.js"
A test file can be found here: http://martinezdelizarrondo.com/bugs/map.html
This is the code:
<p>
<img height="370" id="gMapPreview" src="http://maps.google.com/maps/
api/staticmap?
center=37.4419,-122.1419&zoom=11&size=500x370&maptype=roadmap&sensor=false"
width="500" />
</p>
<script type="text/javascript">
function initLoader()
{
// Create a div replacing the existing img preview
var imgMap = document.getElementById("gMapPreview"),
dMap = document.createElement("div");
imgMap.parentNode.replaceChild( dMap, imgMap);
dMap.style.width = "500px";
dMap.style.height = "370px";
new google.maps.Map( dMap, {
zoom: 11,
center: new google.maps.LatLng(37.4419,-122.1419),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
if (window.addEventListener) {
window.addEventListener("load", initLoader, false);
} else {
window.attachEvent("onload", initLoader);
}
</script>
If I put the div in the original source instead of creating it with javascript then it works correctly, but for this project I want to do it this way. I've tried to do the creation of the div also before the page is finished loading, but that doesn't change the problem.
I haven't tested with IE9, just with IE8 but as this is meant to run in the public side of websites the solution should work also with IE6 & 7 as they are supported by the GoogleMaps api.
Off the top of my head I would suggest doing something before the new:
var map = new google.maps.Map( dMap, {
zoom: 11,
center: new google.maps.LatLng(37.4419,-122.1419),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
IE8 doesn't want you to put block level element(div here) within p tag. Change p to div should fix the problem.