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/
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
Does anyone know if its possible to center a embedded map on an actual placeholder? I mean so that that when the map loads and is centered you can actually see the landmark and the marker in the the map?
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
This is my initialise function that inputs the coordinates of the shop I want to have directions to. However there is not placeholder (pin marker) over the shop. Am I able to do that?
Thanks!
You need to explicitly specify the marker and set its position. Following your example...
var map_canvas = document.getElementById('map_canvas');
var position = new google.maps.LatLng(51.515727, -0.141388);
var mapOptions = {
zoom: 16,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
You have to then create the marker object...
var marker = new google.maps.Marker({
position: position,
map: map,
title: "ANYTHING YOU WANT"
});
That's all you need to do really, but notice that you can always change the center of the map at anytime...
map.setCenter(position);
For more info visit the Developer's Site API Reference
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var point = new google.maps.LatLng(51.515727, -0.141388);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
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);
});
I have this map working fine, i just wanted to add the default google click address marker and if not that a custom bubble for the address?
Anyone help me out, i'm sure its simple but cannot figure out whereabouts to put it..?
<script type="text/javascript">
var map;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
console.dir(map);
google.maps.event.trigger(map, 'resize');
$('a[href="#tab2"]').on('shown', function(e) {
google.maps.event.trigger(map, 'resize');
});
});
});
Many thanks..
Figured it out..
Anyone who needs a marker and for it to work with jQuery tabs try this..
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map2'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am working on a simple web app using jquery mobile. I am attempting to show a google map which shows the visitors gps location on a map. The code below is what i'm currently using, however it shows specific co-ordinates instead.
Can anyone help me change this so that it shows the visitors location? I have tried several solutions but have had no luck. Thank you!
<script>
$('#map_result').live('pageshow',function(event){
loadMap(48.870181,2.779852);
});
function loadMap(Lat, Long){
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
Try this:
$('#map_result').live('pageshow', function (event) {
navigator.geolocation.getCurrentPosition(function (location) {
loadMap(location.coords.latitude, location.coords.longitude);
});
});
function loadMap(Lat, Long) {
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}