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
Related
Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.
You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.
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/
According to the API ref, the map object should have a getProjection
method:
http://code.google.com/apis/maps/documentation/v3/reference.html#Map
While loading the map in this example
should alert the x,y point, but instead
throws the value as undefined. This is the below sample code called in onload.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
alert("projection:" + map.getProjection());
}
It isn't available until the map is finished initializing. You have to wait on the "projection_changed" event before accessing it.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map,"projection_changed", function() {
alert("projection:"+map.getProjection());
});
}
proof of concept fiddle
code snippet:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, "projection_changed", function() {
console.log("projection:" + map.getProjection());
document.getElementById('output').innerHTML = "map.getProjection()=" + JSON.stringify(map.getProjection(), null, ' ');
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="output"></div>
<div id="map-canvas"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script>
</body>
</html>
I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
var marker = new google.maps.Marker({
position:(53.154662, -1.208357),
map: map-canvas,
title:"Hello World!"
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for any assistance.
The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:
Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(53.154662, -1.208357),
map: map,
title:"Hello World!"
});
}
Currently I'm trying to set markers on a map based on user clicks. I have tried everything I can think of and NOTHING works. It seems as though my map doesn't even detect clicks. Currently, I'm trying to keep the script as simple as possible, I'm just trying to detect clicks on the map at this point:
<script type="text/javascript">
function initialize()
{
<!-- Set the initial location-->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
</script>
I've tried so many variants on this sort of code, every it never works. If I change it to "addDomListener(window, ...)" it works, but never using the map as the listener. Ideas?
EDIT: OK, solved it by changing the function somewhat and changing its location in the script:
<script type="text/javascript">
function initialize() {
<!-- Set the initial location -->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
minZoom: 3,
zoom: 8,
maxZoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable-->
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
</script>
I guess you place this code in improper place (or do it in improper time). Recently I've encountered with the same problem and it took some time to solve it. Look what works for me:
var mapservice = {};
mapservice.map = {};
mapservice.options = {};
mapservice.putMarker = {};
mapservice.init = function (divName, textSearch)
{
this.options =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(divName)[0], this.options);
google.maps.event.addListener(this.map, 'click', function (event)
{
mapservice.putMarker(event.latLng);
});
}
mapservice.putMarker = function (location)
{
//...
}