What am I doing wrong here? I can't seem to add a svg layer onto google maps.
This is the javascript file maps.js
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("googleMap"), mapOptions);
var bounds = new GLatLngBounds(new GLatLng(-34.397, 150.644), new GLatLng(-34.397, 150.644));
var oldmap = new GGroundOverlay("test.svg", bounds);
oldmap.setMap(map);
}
this is the html file
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
<body onload = "initialize()">
<div id="googleMap" style="width:80%;height:80%;">
</div>
</body>
"document.createElement" does not work with SVG elements. "document.createElementNS" is required. You have to provide an additional "namespace" argument, "http://www.w3.org/2000/svg"
Have you considered using CANVAS instead of SVG ?
Related
I need to know about to show google maps in Meteor.I did one sample as shown below.
Html code :
<head>
<title>Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
{{> maps }}
</body>
<template name="maps">
<div id="map-canvas"></div>
</template>
Js Code :
if (Meteor.isClient)
{
Template.maps.rendered = function() {
console.log("*** Map Start ********")
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-canvas"),
mapOptions);
console.log("*** Map end ********")
//return map;
}
}//End is Meteor
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
The problem is not showing map when i am run my code.I didn't any idea about this.So please suggest me what to do for this?.
Lets put the map on a initialize function like this.
initMap = function(){
console.log("*** Map Start ********")
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-canvas"),
mapOptions);
console.log("*** Map end ********")
}
//return map;
Now on the rendered function.
Template.maps.rendered = function(){
Meteor.setTimeout(function(){
initMapa();
},2500)
}
Also make sure you have the .css file like this.
#map-canvas {
width: 100%;
height: 300px;
}
And it should works, test it and tell me if works
I have the following code to display the bicycling layer in Google Maps. But I wondered if it is possible to change the dark green colour to another colour?
I have tried setting the strokeColor is var mapOptions but this didn't seem to work.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(53.231472, -0.539783);
var mapOptions = {
zoom: 17,
center: myLatlng
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
This is a jfiddle
http://jsfiddle.net/w8NRr/
The problem is that when I try to move the map(please look at it in), the map moves and then go back automatically to its place, and the map is not fit to the space,
I don't have a css for map except the width and heigh
can u help please?
the map is on the button last Next in jfiddle
Edit
The code for map is so simple, if you don't know it kindly tell me to tell you it
Remove script:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Under
$(".next").click(function () {
add
if ($('fieldset').index($(this).parents('fieldset'))==2){
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
working example : http://jsfiddle.net/w8NRr/2/
I'm showing a Google Map within a div using the code below. When the page loads the map appears to bounce around before settling. Is there a way to stop this behavior? The page is here.
function initialize() {
myform.search.focus();
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
The following works for me:
initially set the visibility-style of #map_canvas to hidden
Then wait for the tilesloaded-event to show the map(with a short delay):
google.maps.event
.addListenerOnce(map,
'tilesloaded',
function(){var that=this;
setTimeout(function(){
that.getDiv().style.visibility='visible'},
100);
});
How can I display a map in Google Closure. There seems to be many UI widgets but none for showing a map
I'm confused. Since Google Closure is a javascript library, can't you just use the Google Maps Javascript API? Something like:
<script type="text/javascript" src="http://maps.googleapis.com/maps/ap/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
And then you can just change the document.getElementById() to whatever you need.
Reference: Google Maps Javascript API