I'm trying to use the traffic layer in the google maps API however when I try to initialize the TrafficLayer object using this line
var trafficLayer = new google.maps.TrafficLayer();
firebug throws this exception message for me
TypeError: ({oa:null}) is not a constructor
here's where I include the API
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
and here's where I initialize the map
function InitialRouteMapLoad(mapId,fromLon,fromLat,toLon,toLat) {
var fromlatlng = new google.maps.LatLng(fromLat, fromLon, true);
var tolatlng = new google.maps.LatLng(toLat, toLon, true);
bounds = new google.maps.LatLngBounds();
bounds.extend(fromlatlng);
bounds.extend(tolatlng);
var myOptions =
{
zoom: 12,
center: bounds.getCenter(),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(mapId), myOptions);
bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map, 'click', function(e) {
});
geocoder = new google.maps.Geocoder();
ser = new google.maps.DirectionsService();
ren = new google.maps.DirectionsRenderer({ 'draggable': true });
ren.setMap(map);
debugger;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
Okay I found it
apparently unlike the other google maps API services I need to use an app key for that one
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key={My Key}&sensor=false&libraries=places"></script>
Related
I'm just starting json and google maps api using this video tutorial on youtube from 2013 as the example. I've got the demo map to display but it's giving me a
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
The original code didn't have an api key call, which I added, but I guess that calls the api twice. How do I not call the api twice?
<head>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/SPREADSHEET_ID/exec=?jsonp=callback";
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 2,
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=#######&callback=jsonp"></script>
</head>
Oh, apparently the sensor parameter is no longer needed so I can just
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=#######&callback=jsonp"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/SPREADSHEET_ID/exec=?jsonp=callback";
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 2,
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map
});
}
}
</script>
</head>
In need of an example of how to show CAP (Common Alerting Protocol) location tags and areas from a feed (or file) on Google Maps. Currently I can show GeoRSS tags on Google Maps with this javascript code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.vticker.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('publicgeorss'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338#N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize1);
And somewhere in the body:
<div id="publicgeorss" style="height:410px; width:400px"></div>
Thanks in advance.
It is straight forward. I dont know how you receive those CAP's, but if the format always is a you describe above you can use the following code :
(Have placed the CAP in a string variable, it would be the same from feed, ajax or file)
document.getElementById('show-cap').onclick = function() {
//parse CAP
var parser = new DOMParser(),
dom = parser.parseFromString(CAP, "text/xml"),
alert = dom.querySelector('alert');
//extract some data
var info = alert.querySelector('info'),
event = info.querySelector('event').textContent,
headline = info.querySelector('headline').textContent,
instruction = alert.querySelector('instruction').textContent,
latLngs = alert.querySelector('area').querySelector('polygon').textContent.split(',');
//create polygon
//CAP seems to have the polygon [1..length-1] and startpoint at [0,length]
var i, latLng,
start = new google.maps.LatLng(parseFloat(latLngs[0]), parseFloat(latLngs[latLngs.length-1])),
path = [start];
for (i=1;i<latLngs.length-1;i++) {
latLng = latLngs[i].split(' ');
path.push(new google.maps.LatLng(parseFloat(latLng[1]), parseFloat(latLng[0])));
}
new google.maps.Polygon({
paths: path,
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 0,
map: map
});
//find and set map center
var bounds = new google.maps.LatLngBounds();
for (i=0;i<path.length;i++) {
bounds.extend(path[i]);
}
map.setCenter(bounds.getCenter());
//create a marker
var marker = new google.maps.Marker({
position: bounds.getCenter(),
map: map
});
//create an infowindow with the headline and instructions
var info = new google.maps.InfoWindow({
content: '<h3>'+headline+'</h3>'+'<p>'+instruction+'</p>',
});
info.open(map, marker);
};
The result :
demo -> http://jsfiddle.net/wm5fsgas/
I am having some difficulty with a google map. The problem is that only a small portion of the map is loading as shown here:
After the page loads, if I resize the browser even the slightest amount, this causes the complete map to refresh and load correctly, as shown here:
Here is my javascript code:
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
var $width = document.getElementById("propertysection").offsetWidth;
$('#map-canvas-2').width($width-28-175);
$('#map-canvas-2').height($width);
$('#myGridMap').height($width);
});
function initialize() {
var map;
var propertyMap;
var marker;
var infowindow;
var myOptions = {
zoom: 6,
center:new google.maps.LatLng(50.7,-86.05),
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);
infowindow = new google.maps.InfoWindow({
content: 'Property Info',
position: new google.maps.LatLng(0, 0)
});
}
Can anyone suggest what the problem might be? Thanks.
You shouldn't mix the jquery ready method with the window load event (see http://api.jquery.com/ready/).
Instead, call initialize from within your .ready function, or place the window resize functions in the initialize method itself (before initializing the map).
I am using bootstrap and a mega menu and I resolved it with using the official Google Maps API asynchronous load function. https://developers.google.com/maps/documentation/javascript/tutorial#asynch
function initialize() {
var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.4221147, -122.0867373),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString =
'<b>Google Gate Bridge</b>' +
'<p>Mountain View, CA 94043, USA</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var tab = document.getElementById('YourHtmlObjectID');
YourHtmlObjectID.onmouseover = loadScript;
YourHtmlObjectID.onclick = loadScript;
I'm using google maps api v2 below to show address in var address line on the map, and I want to have this in api v3. Does anyone know how to make this as google maps api v3?
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map;
var address = "425 West 53rd St,New York,NY,";
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
// Create new geocoding object
geocoder = new GClientGeocoder();
// Retrieve location information, pass it to addToMap()
geocoder.getLocations(address, addToMap);
}
// This function adds the point to the map
function addToMap(response)
{
// Retrieve the object
place = response.Placemark[0];
// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
// Center the map on this point
map.setCenter(point, 15);
// Create a marker
marker = new GMarker(point);
// Add the marker to map
map.addOverlay(marker);
} //]]>
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxx" type="text/javascript"></script><div id="map"></div>
Simple example from documentation, with your address instead of the "input field"
var geocoder;
var map;
var address = "425 West 53rd St,New York,NY,";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
codeAddress();
}
function codeAddress() {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
jsfiddle
I am using the Google Maps API V3 (so no embedding links) and I would like it so when the users click on one of my polygons (overlays) they don't see the white pop up balloon.
The contents of the balloon (as well as the co-ordinates) come from a KML file.
Here is what I am using to generate my map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var paris = new google.maps.LatLng(48.8581,2.3827 );
var myOptions = {
zoom: 4,
center: paris,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var france = new google.maps.KmlLayer('france.kml?v=45', {preserveViewport:true});
var germany = new google.maps.KmlLayer('germany.kml?v=45', {preserveViewport:true});
france.setMap(map);
germany.setMap(map);
}
</script>
Change your vars that load the KML's to something that looks like this:
var kmlLayer;
var kmlURL = 'http://www.yourwebsite.com/mapFileName.kml';
var kmlOptions = {
clickable: 0, // polygon ignores mouse clicks
preserveViewport: 1
};
kmlLayer = new google.maps.KmlLayer(kmlURL, kmlOptions);
kmlLayer.setMap(map);