I'm new to google map api v3. I already establish a decent google map with 2 marker but when I use google.maps.latlngBounds, it return me an error
invalidValueError : setCenter : not a LatLng or LatLngLiteral Object.
How can I fix this?
I just want to centre my map around these markers.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-25.573688, 132.567212);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
try {
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng
});
var marker2 = new google.maps.Marker({
position: myLatlng2
});
trackerMarkerArray.push(marker);
trackerMarkerArray.push(marker2);
var latlngbound = new google.maps.LatLngBounds ();
for (var i = 0; i<trackerMarkerArray.length; i++){
trackerMarkerArray[i].setMap(map);
latlngbound.extend(trackerMarkerArray[i].position);
}
//render new map and center around group of marker
map.setCenter(latlngbound);
map.fitBounds(latlngbound);
} catch (err){
alert(err);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
To "fit" the map to a set of markers added to a google.maps.LatLngBounds object use map.fitBounds(bounds), not map.setCenter().
google.maps.Map documentation
map.setCenter(latlngbound);
map.setCenter takes a LatLng as a parameter, you're passing a LatLngBounds, I think you want to do it like this:
map.setCenter(latlngbound.getCenter());
Related
I created google maps with Json and used database postgresql
this is my code
<script type="text/javascript">
var map;
var national = [{"lng":"-6.173319","city":"JAKARTA","lat":"106.818672"}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-0.789275,113.921327),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('json_city.json', function(data) {
$.each( data.national, function(index, item) {
var myLatlng = new google.maps.LatLng(item.lat, item.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+item.city
});
});
});
// Initialize the map
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Lat and long used character type (Text). My maps can show, but my marker can't show.
Google Maps needs coordinates for the LatLng constructor to be Numbers, not strings. Try:
var myLatlng = new google.maps.LatLng(parseFloat(item.lat), parseFloat(item.lng));
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.
I am using the gem "geocoder" to get the lang and long from a address but I cant seem to be able to get a marker on my map
- lat_long = Geocoder.coordinates(Mode.full_address).to_s.gsub('[', '').gsub(']', '')
%script{:src => "https://maps.googleapis.com/maps/api/js?v=3.exp"}
:javascript
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This places the map where it should be but it does not give me a marker
Add a google.maps.Marker.
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a marker on map center
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am working on google maps api on web
This is my code
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Just the map is shown but the marker is not, why please?
I have a second question please. What is the best action the user expect to click (or do) what they want to add a marker on the map?
Thanks
Maybe you used the ID wrong.
JS:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3523/
I can not get the marker to show up on the map. Can anyone help me find out what is wrong that would be a huge help?
Here is the code:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(map_canvas, mapOptions);
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() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
You appear to be missing the var keyword in front of the marker and Atlanta variables. To fix, I would also declare the map, marker and Atlanta variables outside of the initialize() function in the global space, so they are accessible to other functions. Try this:
var map;
var marker;
var Atlanta;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(map_canvas, mapOptions);
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() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);