I have created a Google Map API and I would like to open it in a new tab(Window). May I know what's wrong with my code? I can open a new tab, but I can't display the Google Map.
Below are my code. Thanks!
function newWindow()
{
var myLatlng = new google.maps.LatLng(0.7,40);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
<A HREF="" onclick="window.open('javascript:newWindow()')" >New Map(In new window)</A>
window.open() takes a URL as a parameter. Your newWindow() function does not return anything, let alone a URL.
You need to call window.open() with a valid URL passed in, which takes care of setting up the map itself.
If you're going to attach an event handler inline, do it right:
<a onclick="window.open('some_url_here'); return false;">...</a>.
That said, in the interest of unobtrusive JavaScript, you should really attach JS event handlers using your external JS code.
Perhaps you want to open your map in a modal dialog instead?
the variable for window.open is the url
New Map(In new window)
There is actually a solution for your problem. The first error here is that the context in new window is different from the old window.
var w = window.open('', '_blank', options);
w is a Window object different from the window. Empty URL create an empty page "about:blank", and since there is no domain, you have read/write access to w.document.
So something like this:
function newWindowMap(latitude, longitude) {
var w = window.open('', '_blank'); //you must use predefined window name here for IE.
var head = w.document.getElementsByTagName('head')[0];
//Give some information about the map:
w.document.createElement('input');
//Place ID, value and type='hidden' here
var loadScript = w.document.createElement('script');
loadScript.src = '...'; //Link to script that load google maps from hidden elements.
var googleMapScript = w.document.createElement('script');
googleMapScript.src = '...'; //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
head.appendChild(loadScript);
head.appendChild(googleMapScript);
}
Now the whole loadScript will be in context of the new window and google map will call a function from it, when it finished loading. You can create new div dynamically and use it to create a map.
Related
[EDIT] it seems the problem comes from google maps which takes some time to update the KML link...I'm not sure, but in the end, it works...[/EDIT]
I embedded an existing public google map on this website : http://www.ridetheflavour.fr
Here is the link of the public map : https://maps.google.fr/maps/ms?msa=0&msid=211027213468691902621.0004c8616605648d245b2
As you can see, the markers of the website's embedded map don't match the public google map markers. It seems it's not a matter of browser cache...
Here is the javascript snippet i'm using (Google map API V3) :
var mapOptions = {
center: new google.maps.LatLng(24.797409,-5.449219),
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
overviewMapControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var georssLayer = new google.maps.KmlLayer('https://maps.google.fr/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=211027213468691902621.0004c8616605648d245b2');
georssLayer.setMap(map);
Any help would be greatly appreciated.
Google's servers cache the KML content for some period of time. To force the rendered KML to update, add a cache busting parameter to the URL. I usually use a function of the date/time if I need to do it programmatically, or if it is just a one time edit a manual ?a=0 and incrementing that as I make changes works.
Something like this (if you don't have any other query parameters in the URL):
var URL = filename+"?dummy="+(new Date()).getTime();
Or you can simplify it even further and use:
var URL = '[your kml url here]&ver=' + Date.now();
var georssLayer = new google.maps.KmlLayer(URL);
I'm pulling long, lat coords from my collection and I want to generate dynamic Google Map Markers onto the map in the page.
The data is populating fine in the source, but the markers fail to show on the page.
Is it possible to inject a javascript object into the <script></script> tags?
Javascript
Template.maps.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {zoom: 8, center: new google.maps.LatLng(33.658206, -111.962827)});
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
HTML
<template name="maps">
<div id="map-canvas"></div>
</template>
Don't mix html and js. Put all the javascript inside methods of relevant template.
Template.mapWrapper.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {...});
_.each(locations, function(location) {
marker = new google.maps.Marker({...});
});
});
You should also use classes or data parameters instead of element id, but most importantly, don't mix html and js.
What I'm trying to do is to change the default icon that is displayed when you set the Clustering Configuration for a Bing Map using the Bing Maps Ajax Control 6.3.
I have a function that loads a Bing Map like this:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions(icon, null);
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
But so far it keeps displaying the same default icon. What am I missing here?
Another thing I was wondering is if there's a way to change the custom icon if a pin in the cluster changes, like if I have 5 green Push Pins but one of them is updated to be a blue Push Pin, is there a way to change the icon that represents that cluster?
I found the reason my approach wasn't working, I keep thinking I'm dealing with classes with constructors that receive parameters, which in this case the VEClusteringOptions class doesn't receive parameters in its constructor. I had to set the Icon property separately:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions();
options.Icon = icon; // here's the "big" difference
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
Now my custom cluster icons are being loaded great, I need to get used to more to the concept of property in the future.
I did the development long time ago for our company site. Did you try the interactive SDK available here?
http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
I have added the reference for pushpin development
http://www.microsoft.com/maps/developers/web.aspx
How do I show a local image for a GMarker? I am using v2. Code sample
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = '/Images/marker/mr.png';
markerOptions = { icon: blueIcon };
map.setCenter(point, 3);
var marker = new GMarker(point, markerOptions);
Its not working...
What's local to the map page is the Google Maps site itself, so if you want to use an image from your site, you have to provide the full URL for it.
If you haven't seen the v2 docs, here is a link:
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Custom_Icons
Also, are you actually adding it to the map, or have you omitted that from your code?
Here is a full example:
http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html
Does this look like it should work? I'm wanting to generate directions from one latitude/longitude to another latitude/longitude.
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(35.742149,139.337218);
wp[1] = new GLatLng(35.735347,139.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.load("from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267");
The map loads fine, but the directions don't come in. I've tried it this way too:
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(32.742149,119.337218);
wp[1] = new GLatLng(32.735347,119.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.loadFromWaypoints(wp);
Same thing... map but no directions. Any help is greatly appreciated, thank you in advance!
I can't see anything obvious at first glance at your code, so my first guess is a failure coming back in for the GDirections request (I am also assuming you have checked the javascript error log for any errors, Tools/Error Console if you haven't already done this).
I suggest you add an error handler for your GDirections object, this will give you some indication what is happening with your request:
GEvent.addListener(directions, "error", handleErrors);
and in the handleErrors callback have a look in:
directions.getStatus().code
Compare with the Geo Status Codes.
EDIT: Ok, I just tried out your code here and it works perfectly. I can only assume that there is some other problem on your page that is causing the issue. Can you post a link in the question so we can check it out ?
Checking the status (604) I got when I tried in the Google Maps API Reference says:
The GDirections object could not
compute directions between the points
mentioned in the query. This is
usually because there is no route
available between the two points, or
because we do not have data for
routing in that region.
and this is the code I used (slightly modified):
$(function ()
{
if (GBrowserIsCompatible())
{
var wp = [new GLatLng(35.742149,139.337218), new GLatLng(35.735347,139.328485)];
var map = new GMap2(document.getElementById('map-canvas'));
map.setCenter(wp[0], 12);
map.setUIToDefault();
var marker = new GMarker(wp[1]);
map.addOverlay(marker);
var directions = new GDirections(map);
GEvent.addListener(
directions,
'error',
function ()
{
console.log(directions.getStatus().code);
}
);
directions.load('from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267');
}
});