I’ve just built up a customized tiles map site : http://shuttle.wanglingjie.net/memoire/memoire.html.
But I have a trouble with making a marker on it. Once I added the new marker code:
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(0, 0),
map: map
}
);
The maker doesn’t show up and the js reports an error with the following message:
Uncaught Error: Invalid value for property : [object HTMLDivElement]
Any ideas? Thank you for your attention. :)
map is null. In firebug, your site gives this error:
map is not defined
http://shuttle.wanglingjie.net/memoire/memoire.html
Line 129
Your javascript code is badly laid out, so it is hard to see what you have done wrong. I think the problem is that your window.onload function does not have a closing bracket: }.
You should lay your javascript out so that all code contained within brackets has the same amount of indent. For instance, the code you have posted should look like this:
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(0, 0),
map: map
}
);
It's also acceptable to write it like this:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map
});
This makes your code easier to read, and will help you find bugs.
If you need more help, please edit your question to include the full body of your function, correctly formatted.
From the source code given in the link I noticed that the block that creates the marker is outside the function that creates the map. That's why the marker doesn't see the variable map.
Related
I have two problems.
1 ) I have a google map with a marker and the label applied to it goes right through the center of the marker. Ideally I would like it above the marker, but at this point I'll take anything. Here's what I have.
var m:Marker = new Marker(new LatLng(tempLat,tempLang),new MarkerOptions({label:"Hello World"}))
2 ) I have the same problem with the infoWindow. It completely covers the marker. Here's the code.
map.openInfoWindow(new LatLng(tempLat,tempLang), new InfoWindowOptions({title: "Hello", content: "World"}))
Thank You.
I don't think there's any answer for the marker label, but for the InfoWindow this is what I have.
map.openInfoWindow(new LatLng(tempLat,tempLang), new InfoWindowOptions({title: storeName, content: to.text, hasTail:true, pointOffset: new Point(0, -40)}));
when i search for nearby locations on the site i am workign on the results show up in a list but the map area is just grayed out sometimes it comes back but then goes away.
any help would be greatly appreciated
This is a response to your question on the first answer. His idea is right that you need to initialize it with a location before anything can be visible. Also please note that this is a question about V3, the first answer addresses the syntax of V2. Please try the code below using the same idea as the v2 post.
Set the center value in the map options with your initial location. You can also adjust the zoom here.
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(latitude, longitude)
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
The timing of initializing is important. Is the map visible at the moment the page loads, or does it pop up/fade in/(whatever that changes the state from invisible to visible)?
If the map is hidden at the moment of initializing, the map will be grey.
In v3, check your Lat and Lng are OK and are not "undefined".
console.log(results[0].geometry.location.k);
console.log(results[0].geometry.location.D);
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(
results[0].geometry.location.k,
results[0].geometry.location.D
)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
Based on my experience working with google maps, sometimes the gray patches appear when there is no available map data at the location you are currently previewing (esp. when the zoom factor is high), or when you internet connection is slow, such that map data takes long to load / fails!
But other factors could also be a cause -- maybe.
When you initialize your map, say for example:
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
the seconds parameter to the map.setCenter is the zoom factor - in this case 13.
you can also set a new zoom level for the map like this:
map.setZoom(5);
Read more here...
I researched the Maps Api and it's pretty complicated for me..and I didn't find what I want.
I wrote a php program that does some gps coordinate manipulation and returns me 2 sets of latitude and longitude value ready to use. All I want is to generate a map showing 2 markers for these 2 places, with a straight line between them.
One pair of LAT/LNG value is different each time but for sure somewhere in US, and the other pair is random, can be anywhere in the world. (and hence, maybe the zoom level should adjust accordingly)
How should I implement this? Thanks a lot!
edit:
I have created this map with 2 markers, code:
echo '
function initialize() {
var pos_query = new google.maps.LatLng('.$decimal_latitude.','.$decimal_longitude.');
var pos_tim = new google.maps.LatLng('.$result_tim_lat.','.$result_tim_lon.');
// var latlngbounds = new GLatLngBounds();
// latlngbounds.extend(pos_query);
// latlngbounds.extend(pos_tim);
var myOptions = {
zoom: 5,
center: pos_tim,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//---> map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
var marker_query = new google.maps.Marker({
position: pos_query,
map: map,
title:"Your query location"});
var marker_tim = new google.maps.Marker({
position: pos_tim,
map: map,
title:"Tim Horton"});
}
</script>';
However, I want to auto-adjust the zoom level and center of map using the code in comment.
But it doesnt work (the map doesnt show up)
I guess Im using V3 and the code in the comment part is older version?
Most of the Maps API's will do what your asking easily. You should read this Google Maps API-Jscript
This will get you started.
This is the actual API reference and is where you will find Maps, Controls, Overlays and Services. Pay special attention to the Overlays section, this is what you need to place your points on a map as well as custom images or graphics. The rest is programming. If you have specific questions regrading programming your best bet is to try some of this in your code and come back with code examples of what you're trying. Hope this helps.
I've just begun using the Google Maps API (v3.0) and have had a good deal of success so far. I am loading a set of objects with Latitude & Longitude values from a database, passing them into my script, and looping over them in the script in order to add them to the map.
I am using the "bounds.extend() / map.fitBounds()" method of setting the map's zoom & bounds (see code below), which works as expected the first time around; however, if I clear out the existing markers, fetch another set of objects, and do the same thing on the same map instance, it sets the bounds incorrectly, usually resulting in a minimum zoom (an astronaut's view).
My suspicion is that my map object has some memory of the previous set of bounds that I've given it and that I need to find a way to clear these bounds before assigning my new ones, but I really can't be too sure.
Any help is greatly appreciated!
var locationList = [];
for (var i = 0; i < mapPoints.length; i++) { // mapPoints is a collection of DTOs
var mapPoint = mapPoints[i];
var location = new google.maps.LatLng(mapPoint.Latitude, mapPoint.Longitude);
locationList.push(location);
var marker = new google.maps.Marker({
map: map,
icon: '/Content/images/map/' + mapPoint.Status.Icon,
shadow: '/Content/images/map/shadow.png',
position: location
});
markers.push(marker); // markers is an Array that is managed outside this loop
}
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < locationList.length; j++)
bounds.extend(locationList[j]);
map.fitBounds(bounds);
This isn't the answer, so to speak, but a (slightly hacky) workaround that I discovered on a thread in the Google Maps Javascript API v3 group:
//map.fitBounds(bounds);
setTimeout( function() { map.fitBounds( bounds ); }, 1 );
if the above answer doesn't work for you (it didn't for me), the problem might lie in bootstrap (assuming you're using it). bootstrap modals specifically generate all sorts of wonky behaviour when i embed a map object in it.. curiously correcting itself if/when i drop an 'alert' in there.. in any case, i solved all my problems by just building my own modal (ie, not using bootstraps modals).
I am having problems using the MarkerManager. Somehow Markers added with the MarkerManager do not show up, though i do mgr.refresh(); It works when i use basic map.addOverlay(marker); but not when using mgr.addMarker(marker);. Weird. Hope someone here can help.
Here's the relevant code:
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
bounds = new GLatLngBounds();
map.setCenter(new GLatLng(48.25, 11.00), 4);
mgr = new MarkerManager(map, mgr_options);
markers = createSpotMarkers(spots); // parsing spots, extending bounds, creating Array of GMarkers etc, pretty basic and seems not be relevant.
mgr.addMarkers(markers); // does not work
map.addOverlay(markers[0]); // works
mgr.addMarker(markers[0]); // does not work either
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)-1);
mgr.refresh();
}
It looks like the API for MarkerManager expects 3 arguments to addMarkers, of which the 3rd seems to be optional. The second, however, doesn't. If the API doesn't help, then a blog post showing example usage might. Good luck!