google.maps.LatLng vs google.maps.LatLngLiteral - google-maps

I am adding google maps to an application I am working on and have successfully gotten myself stuck on a question that may have no impact whatsoever on my application.
Regardless, I am curious why Google Maps allows you to use
new google.maps.LatLng(x, y)
or
{lat: x, lng: y}
I have used both formats and see absolutely no difference but I feel as though I must be missing something... I cannot believe google.map.LatLng exists with no specific purpose.
This:
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:7,
center: chicago
}
Or this:
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = {lat: 41.850033, lng: -87.6500523);
var mapOptions = {
zoom:7,
center: chicago
}

google.maps.LatLng is the original class (the earliest versions of the API didn't have the google.maps.LatLngLiteral), most but not all, functions that accept a google.maps.LatLng also accept a google.maps.LatLngLiteral ({lat: x, lng: y}).
The advantage of a google.maps.LatLngLiteral is it doesn't require the API to be loaded to use it, it can be used and initialized prior to loading the API.
The advantage of a google.maps.LatLng is that some functions (primarily those in the geometry library) only accept google.maps.LatLng as inputs.

Related

How to use fitBounds of GMaps.js

I am using GMaps.js and I have several points to show, I need to show all and set the zoom to the point, I was watching the documentation and requests an array of google.maps.LatLng type. I have the following code
for (x in geo){
var item = new google.maps.LatLng(geo[x]["latitud"], geo[x]["longitud"]);
arrayBound.push(item);
}
map = new GMaps({
div: '#divMapa',
lat: latWS,
lng: lngWS,
zoom: 13
});
map.fitBounds(arrayBound);
I didn't find the solution obvious, but, here is an example that works with v0.4.11:
var latlngs = [{lat:"39.158542", lng:"-84.423903"}, {lat:"39.4339357", lng:"-84.9850474"}];
var bounds = [];
for (var i in latlngs) {
var latlng = new google.maps.LatLng(latlngs[i].lat, latlngs[i].lng);
bounds.push(latlng);
map.addMarker({
lat: latlngs[i].lat,
lng: latlngs[i].lng
});
}
map.fitLatLngBounds(bounds);
Rename fitBounds to fitLatLngBounds.

XML and Google Maps, only one marker showing (of four)

I've a problem with my code. I can get the lat and lng to load from the xml file and display it on google maps, but it only displays the first record (there are 4 in total).
I'm 100% confident the xml is fine, I just can't figure out how to display all the markers on googles map.
Any help would be great!
function initialize() {
var myLatlng = new google.maps.LatLng(53.956086, -9.140625);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery.get("markers.xml", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var Lat = $(this).find('lat').text();
var Lng = $(this).find('lng').text();
var latlng = new google.maps.LatLng(parseFloat(sLat), parseFloat(Lng));
var marker = new google.maps.Marker({position: latlng, map: map});
});
});
}
Any logs/errors with tools like firebug?
looks good from what I can tell (2 problems: you initialize marker 2 times and sLat is not defined).
Are you sure it's looping each 4 times and not only once?
Had you debugged that?

How to show marker

How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.

google geocoder service

I'm trying to use Google geocoder service to get the coordinates of cities input by the user. However looks like there's some problem initializing the LatLng() object (latlngCity), and the map won't show up. The code is as following:
var map;
var latlngCity;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': 'Lisbon, PT'}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
latlngCity = results[0].geometry.location;
}
});
var myMapOptions = {
zoom: 8,
center: latlngCity,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myMapOptions);
}
For simplicity, I'm inserting the address city string myself. Variables map and latlngCity are globals. Is there anything wrong with this code?
Thanks very much.
You need to move the map creation code into the geocode callback (or alternatively create the map with some default position and then re-center the map inside the callback).
In your code, latlngCity is undefined by the time of map creation while geocode is still being executed (asynchronously).
Hope this makes sense. Otherwise I'll provide some code. Let me know.

Google Maps Api v3 - set map position in runtime

How can I change position of the map, from where it is pointing now, to ie. 45.00,19.00, but in a runtime, now when map is initialized?
my application have to "jump" from some coordinates to other, so that's why I need this ability.
ok, here it is:
MyMap.map.setCenter(new google.maps.LatLng( 45, 19 ) );
Create that Map object, save it to a variable (i.e. map) and then use map.panTo().
See the reference of Map
you need the extended MVCObject() ....
there you find getPosition() (return: LatLng) and setPosition(latlng:LatLng)
you just need to set this property and map location will change
Define the place where to position
Pass that to map.setCenter()
var map;
function initMap() {
var container = document.getElementById('map');
var options = {
zoom: 18,
gestureHandling: 'cooperative',
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(container, options);
var myPlace = { lat: 23.7266, lng: 90.4216 };
map.setCenter(myPlace);
}