I have initialized the Google Maps load function, and it works fine. There are also multiple markers with clusters. I haven't put markers and cluster codes here. Those are standard code. My code:
jQuery(document).ready(function(){
initialize();
});
function initialize() {
var center = new google.maps.LatLng(59.875405, 10.842099);
var zoom = 10;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function mapAnimate(){
var map = google.maps.Map(document.getElementById("map-canvas"));
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
window.setTimeout(function() {
map.panTo(new google.maps.LatLng(58.9633, 5.7189));
}, 500);
});
}
Then I want to move the map to another center position without re-generating the map. There is a link which calls the function mapAnimate().
HTML:
test
But it does not work. I get an error like this:
TypeError: c[Eb] is not a function......
Actually I don't get the map instance.
Declare your map variable outside the functions. That should do the trick.
jQuery(document).ready(function(){
initialize();
});
var map;
function initialize() {
var center = new google.maps.LatLng(59.875405, 10.842099);
var zoom = 10;
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function mapAnimate(){
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
window.setTimeout(function() {
map.panTo(new google.maps.LatLng(58.9633, 5.7189));
}, 500);
});
}
But if you call the mapAnimate() function from a click event, I don't see why you would need that listener on the map object.
Related
How do I add a user-input marker to Google Maps widget on my website, and get the latitude and longitude data from it?
Right now I am building an application which has to allow users to drop a marker to any location so that I can get that data and process it.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: 'terrain'
});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
</script>
Right now I am using this, but this doesn't offer any user submitted markers.
Try running this working jsfiddle for demonstration and guidance on how users can place markers on a Google map. Note that it's based off of Google's example on adding and removing markers.
Full JS code below:
var map;
var markers = [];
function initMap() {
var haightAshbury = {
lat: 37.769,
lng: -122.446
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
You can get the marker's coordinates from the map's click event listener, e.g.:
map.addListener('click', function(event) {
console.log(event.latLng.lat());
console.log(event.latLng.lng());
addMarker(event.latLng);
});
Or from the addMarker method:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
console.log(marker.getPosition().lat());
console.log(marker.getPosition().lng());
markers.push(marker);
}
Hope this helps!
I use a google map with javaScript and my code is :
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-12.043333,-77.028333);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, "mousedown", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
console.log(latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
The result of e.latLng is an empty object.
I tried to click the event, but the result is empty.
What should I do or change?
Your code is working fine :
Click on map and your coordinates will come in alert
Please check here
I'm currently adding markers on a google map when I click on a given location. The markers are currently saved both to a Collection - Markers - and in to a more classical array. What I would like to now is to add new marker to the map as they are added by other users.
My question is: Is there any way to get notified when the collection is modified (e.g. another user add a marker) ?
Maybe this is not the best way to do it. Any other suggestion?
if (Meteor.isClient) {
Template.hello.rendered = function(){
markersArray = [];
var latlng = new google.maps.LatLng(46.123, 8.843);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng);
});
}
var opts = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), opts);
// add a click event handler to the map object
google.maps.event.addListener(map, "click", function(event)
{
placeMarker(event.latLng);
});
Session.set('map', true);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
Markers.insert({"marker": location, "date": new Date()});
markersArray.push(marker);
}
}
}
As per the previous answer, you should use an observestructure, but you really need to avoid leaving the observer running forever:
Template.hello.rendered = function() {
this.markerObserve = Markers.find({}).observe({
added: function(m) {
placeMarker(m.location) // obviously depends on the structure of Markers documents
}
});
};
Template.hello.destroyed = function() {
this.markerObserve.stop();
}
You have to use observer
Template.hello.rendered = function(){
Markers.find({}).observe({
added: function (m) {
// Add marker
}
});
}
I am trying to populate a google map with markers. The information for each marker is contained in this array:
[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]
However, my map does not show the markers. I am using this code in my javascript:
getLocations();
function getLocations() {
alert('hello');
$.ajax({
type: "GET",
url: "http://localhost:8888/public/test",
dataType: "jsonp",
success: function(json){
$.each(json, function(i, entry){
PlotMarker(json[i].lat, json[i].long);
});
},
error: function(err){
console.log(err);
}
});
}
function PlotMarker(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markerLocations.push(marker);
}
Is there any way to fix this issue? Calling this url
http://localhost:8888/public/test
returns the JSON shown above.
Any help would be greatly appreciated.
Thanks.
EDIT:
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Declare your map variable outside of the initialize function. It's the only way that other functions will be able to see it:
var map;
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Try changing:
PlotMarker(entry.location.lat, entry.location.lng);
to:
PlotMarker(entry.lat, entry.lng);
Try changing this:
PlotMarker(entry.location.lat, entry.location.lng);
To:
PlotMarker(json[i].lat, json[i].lng);
I think it's because of the outer []'s.
The main problem is that getLocations() is called before initialize() is started. You have to comment out getLocations(); and move it to the end of initialize() function.
That is not enough: map definition has to be moved outside of initialize() function and should not be redefined inside initialize() function.
markerLocations, used in PlotMarker(), is not defined. Should be defined as global like map
var map;
var markerLocations = [];
function initialize() {
...
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
...
getLocations();
}
PlotMarker() has to be called like:
PlotMarker(entry.lat, entry.lng);
Are you ever calling your initialize function? Call it right when the page loads.
google.maps.addDomListener(window, 'load', initialize);
as shown here.
What is the sequence of those functions? Which do you call first, and next?
I have encountered this kind of problem and what happens is, the map has not finished loading all the tiles so the markers could not be placed on those and so they do not appear. But when you check in the console, the marker objects are there.
This is how I solved it:
google.maps.event.addListener(map, 'tilesloaded', function() {
plotMarkers();
google.maps.event.clearListeners(map, 'tilesloaded');
});
It assures the map tiles are completely loaded before plotting the markers. In this case, the markers will surely be visible.
Hi guys I have the following problem. The google map is not dimensioned against that point. Here is the code I've written so far. I do not know why but this function google.maps.event.trigger(map, "resize");does not work if you put it in click event
$(function() {
var map;
$('.check-in').click(function(e) {
var coordX = $(this).data('x'),
coordY = $(this).data('y');
initialize(coordX, coordY);
});
function initialize(x, y) {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(x, y);
var map_options = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.trigger(map, "resize");
}
});
If I understand your issue correctly, the map is contained within a bootstrap modal and is not resizing once the modal is shown/displayed.
To do this, you need to trigger the google maps resize event on the modal's 'shown' event. For Bootsrap v3, the following should work. For v2, use 'shown' instead of 'shown.bs.modal'
$('#modal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});
I had such a problem.
I solve it whit show the map in
I think there problem whit js files conflict