I'm loading large KML layers using the google maps API and geoxml3, via parseKMLString.
Relevant question and Example using this function.
While these files are being rendered to the map, the UI is frozen. As this is using google maps, I can't put this code in a Worker and wrapping this in a promise isn't going to change anything.
Relevant code block:
var latLong = new google.maps.LatLng(37.0902, -95.7129);
var myOptions = {
center: latLong,
zoom: 10
};
myMap = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
geoXmlParser = new geoXML3.parser({
map: myMap ,
singleInfoWindow: true
});
geoXmlParser.parseKmlString("long-kml-string", geoXmlParser.docs);
I'm also open to alternatives to both loading these files and other libraries that may exist to assist.
I am trying to load my map in framework 7 but I am unable to do that. The error I am getting is google is undefined.
Below are my codes
JavaScript code
CascadingApp.onPageInit('admin', function(page) {
initialize();
});
function initialize() {
var map = null;
var latlng;
latlng = new google.maps.LatLng(37.4419, -122.1419);
var options = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), options);
}
HTML CODE
<div id="map" style="height:400px; width:1200px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAWzZ-1BPmaWKFT0du3cis82mj9Y5ljIgk&callback=initMap" async defer></script>
Does not load map in the page.
Add google api script<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAWzZ-1BPmaWKFT0du3cis82mj9Y5ljIgk&callback=initMap" async defer></script> in your index.html file. Currently api is present admin.html template. So when the
admin view is load
CascadingApp.onPageInit('admin', function(page) {initialize();}); at that time google api is not full loaded i.e asynchronous behavior and throw error google not defined. So simply put google api in your index.html page rest is fine.
Hope it helps you !
I added the Google script at the bottom of my index.html but without the callback function.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Next, in my app.js script, declare the variable map as global and create the following function to init the map when the page is fully loaded :
$$(window).on('load', function(e) {
initMap();
});
Define the same initMap function inside app.js and remember set a style to map div (width and height at least).
Hope helpful to you ;-)
I used to use an iFrame to embed a Google Map in a web page, but have recently switched to the JavaScript API to give myself more flexibility.
I am loading the map using the co-ordinates, which is working relatively well.
However, when I view a business on Google maps or in an iFrame for that matter, I can see the business I'm trying to focus on, highlighted in red:
But I can't seem to achieve this with the API -- which sometimes doesn't show the business name at all, let alone highlight it red. I've used DHL as an example here.
How can I 'bind' the map to a business location using the JS API?
My current script looks much like the one provided by the Google walkthrough pages:
function initialize() {
var longLat = { lat: 52.8004265, lng: -1.6334708},
mapOptions = {
center: longLat,
zoom: 18,
scrollwheel: false,
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
var marker = new google.maps.Marker({
position: longLat,
map: map,
title:"DHL"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can attach infowindow to your marker and display the business name in that way. Here is an example
And here's another example using customized label as a marker, and it can contain the business name. Example
Below is some javascript based on the Google Maps documentation. It should display a marker at the LatLng coordinates indicated. However, it is showing the map only without the marker. Can someone point out what I've done wrong? I've been staring at this for a long time and can't figure it out. Also, I need to modify this code to accept two arrays of marker coordinates. Each array is to get a different marker icon: red.png, yellow.png and blue.png. I plan to eventually get the coordinates for each marker group by calling a server-side webmethod (C#). But for simplicity let's ignore that requirement for the moment and assume we have three static arrays. Can someone show me what I need to do? I've seen a lot of similar questions on S.O. but none of the answers seem to work for me.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&sensor=true">
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(39.50, -98.35),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
map.addOverlay(new google.maps.Marker(
new google.maps.LatLng(39.50, -98.35)));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Markers are created as:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(39.50, -98.35),
map: map
//, ...
});
I have a program that I want to use google maps for. The problem is I get an error that says a is null where a is a var used in the google map api. Here is how I call my google map:
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);
//The options for the google map
var myOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
And here is what my HTML tag looks like:
<div id = "map_canvas"></div>
I get the lat and lng on page load through the url. These values are passed in correctly so I know that is not the problem. I think that it has to do with the var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); not being correct. Any suggestions?
EDIT: Here is the error message:
a is null
fromLatLngToPoint(a=null)
yg(a=null, b=Object { zoom=7, maxZoom=12, more...})
d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f=[function()])
d(a=undefined)
d()
[Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}
Make sure you specify the size of the element that holds the map. For example:
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
Also make sure your map variable is defined in the global scope and that
you initialize the map once the DOM is loaded.
You are probably not listening for the onload event that fires when the page is completely loaded. As a result, your script is running but the div you are creating doesn't yet exist. Use jQuery to listen for this event, like so:
$(document).ready(function () {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
If you don't want to use jQuery, then add an event listener to body.onload
This rather cryptic error means that the script can't find the map div.
This could happen for a couple of reasons.
1. You're using the wrong ID to refer to the map.
Check your ids (or classes) and make sure the element you're referring to actually exists.
2. You're executing the script before the DOM is ready.
Here's a jQuery example. Notice we're triggering initialise on document ready, not onDOMReady. I've taken the liberty of wrapping the script in a closure.
(function($) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
$(document).ready(initialize);
})(jQuery)
You could also use:
google.maps.event.addDomListener(window, 'load', initialize);
if you prefer a Google solution.
Had the exact same problem and this is have i fixed it for me.
The thing was that I had 2 google maps in my website - one in the footer and the other one on the contact page, but i called them both in one JS file like so:
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
But the thing is that the object with id="map-canvas" was located only on the contact page.
So at first you have to check if that element exists on the page like so:
if ($("#map-canvas-footer").length > 0){
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
}
if ($("#map-canvas").length > 0){
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}
I hope this can help someone else as well ;)
This happens when the map is not yet loaded. You should build your map when the Maps API JavaScript has loaded. Executing the function to initialize your map only when the API has fully loaded passing it to the "callback" parameter in the Maps API bootstrap.
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 = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
This is actually in the Maps API Docs here. Hope this helps!
Make sure that your canvas div (Div associated with the map) exists.
Sometimes, if we rename the div's id attribute.
Then it creates problem as it does not get the canvas div.
I got this error once. Make sure the map script runs only on pages using the map. You can check if the map exists by using an "if". Something like this:
if ($('mapClass').length>0) { // here you run the google maps functions }
See ya
Solved, the google map type a error, make sure you get object var map = document.getElementById('map-canvas') returning properly using alert(map). Check the div container id name same as specified in getElementByid.
I have also stuck with the same type a error, fixed it by checking getElementByid('map-canvas'). Sample code enter link description here
I have fixed it removing my "style" property from the "div" tag an declaring it correctly, in a css file
My response is bit old but for those who still come here for reference, I have a similar solution. I put map initialization code as specified here https://developers.google.com/maps/documentation/javascript/adding-a-google-map
inside jQuery document ready function. Below is the code that worked in my case:
$(document).ready(function () {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map( document.getElementById('embedmap'), {zoom: 14, center: uluru} );
var marker = new google.maps.Marker({position: uluru, map: map});
});