I'm using "gmaps4rails" on rails,
it is useful, I can show the direction form A to B, and some markers on google maps.
Now, I need some advanced features:
I want to show "Street View" on google maps,like this http://www.trulia.com/property/3064331264-482-Mariposa-Ave-Mountain-View-CA-94041
I noticed that in the left of this map http://www.trulia.com/property/3064331264-482-Mariposa-Ave-Mountain-View-CA-94041, you can click "Comparables","Estimates","Schools"...
how are these features achieved in rails?
Thanks in advance!
The answer doesn't really have much to do with rails.
Take a look at this sample code from Google.
In particular, take a look at the javascript:
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
Related
I am new to the ArcGIS API for Javscript 4.0 API. Using the calcite sample on the API website. Where can I add in a feature Layer to the map view and scene view? Essentially I'm trying to merge the Feature layer sample
here: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer/index.html
/********************
* Add feature layer
********************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
map.add(featureLayer);
with the calcite map sample here:
https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html
but am not sure what part to add the layers to. I have tried a few times. See below. Thanks
/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/
// Map
var map = new Map({
basemap: app.basemap
});
app.mapView = new MapView({
container: "mapViewDiv",
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Scene
var mapScene = new Map({
basemap: app.basemap,
ground: "world-elevation"
});
app.sceneView = new SceneView({
container: "sceneViewDiv",
map: mapScene,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Set the active view to scene
app.activeView = app.mapView;
// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search({
view: app.activeView
}, "searchWidgetDiv");
app.searchWidget.startup();
// IS THIS WHERE I CAN ADD LAYERS??????????????????
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
app.mapView.map.add(featureLayer);
app.sceneView.map.add(featureLayer);
You can add them directly to the map object in 4.0. Look at the API documentation here for a small example: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers.
Essentially it would look something like this:
var featureLayer = new FeatureLayer(url);
var map = new Map({
basemap: app.basemap,
layers: [featureLayer]
});
You would need to make sure you apply this to whichever map you want them to render on.
you may need the following code:
var countyLayer = new FeatureLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/newyourk/MapServer/1"
});
app.map.add(countyLayer);
I have this code to place a marker on the specific coordinates thanks to Google Maps JavaScript v3:
function initialize() {
var gm_latlong = new google.maps.LatLng(59.328615,13.485699);
var gm_options = {
zoom: 10,
minZoom: 4,
maxZoom: 20,
center: gm_latlong,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var gm_map = new google.maps.Map(document.getElementById('google-maps'), gm_options);
var gm_marker = new google.maps.Marker({
position: gm_latlong,
draggable: false,
map: gm_map
});
}
Very simple! But I want to get the 5 nearest markers for this location and it's here it got complicated - I don't know how to accomplish this! I know that this code only prints one marker and it should be a loop in this function to do such a thing. But I store the coordinates in my database and I want to fetch them from there.
Is this even possible?
Thanks in advance.
So I am trying to initialize a google map based on a string location instead of latitude and longitude. Here's my current code
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644); // Want to pass an address here
var myOptions = {
zoom: 8,
center: latlng,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
I looked up Geocoding. How would i initialize the lat long from an address like "Brooklyn, NY"
You're already on the right track with Geocoding, read the following doc and ask any questions you still have, it's pretty straight forward once you get into it.
http://code.google.com/apis/maps/documentation/geocoding/
I've been trying to find a way to use the 'Reverse Geocoding' service with the Latitude and Longitude co-ordinates coming from two text boxes on my HTML form, and I must admit I'm not really sure what I need to do.
I have managed to do this with the 'Geocode' service (see code below), but I just wondered whether someone may be able to point me in the right direction of how I could adapt the 'Geocode' javascript I have to the 'Reverse Geocoging' service.
(function Geocode() {
// This is defining the global variables
var map, geocoder, myMarker;
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
// This is making the link with the 'Search For Location' HTML form
var form = document.getElementById('SearchForLocationForm');
// This is catching the forms submit event
form.onsubmit = function() {
// This is getting the Address from the HTML forms 'Address' text box
var address = document.getElementById('GeocodeAddress').value;
// This is making the Geocoder call
getCoordinates(address);
// This is preventing the form from doing a page submit
return false;
}
}
// This creates the function that will return the coordinates for the address
function getCoordinates(address) {
// This checks to see if there is already a geocoded object. If not, it creates one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// This is creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// This is making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// This checks to see if the Status is 'OK 'before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// This centres the map on the returned location
map.setCenter(results[0].geometry.location);
// This creates a new marker and adds it to the map
var myMarker = new google.maps.Marker({
map: map,
zoom: 12,
position: results[0].geometry.location,
draggable:true
});
//This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
//This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
google.maps.event.addListener(
myMarker,
'dragend',
function() {
document.getElementById('Latitude').value = myMarker.position.lat();
document.getElementById('Longitude').value = myMarker.position.lng();
var point = myMarker.getPosition();
map.panTo(point);
}
);
}
}
)
}
})();
UPDATE
Firstly, many thanks for the code you kindly posted and the suggestion to go and have a look at the Google documentation.
From what you suggested, and from what I took from the additional documentation I came up with the following. However, when I click my submit button nothing happens, almost as if there is no command attached to it. I don't receive any error messages and I've checked to make sure that I've linked the code to the correct fieldnames and all seems ok. I just wondered whether it would be at all possible if you, or indeed anyone else, could take a look at it please to tell me where I've gone wrong.
Many thanks and kind regards
(function ReverseGeocode() {
var form, geocoderRequest, latlng, myMarker, point;
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var latlng = new google.maps.LatLng('Latitude', 'Longitude');
// This is making the Geocode request
geocoder.geocode({'LatLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var myMarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
//This fills out the 'Address' text boxe on the HTML form
document.getElementById('Address').value= results[0].geometry.location.latlng();
var point = myMarker.getPosition();
map.panTo(point);
}
}
}
)}})
Once you have the latitude and longitude from your form, you do something like this (using your above code as a starting point, for the sake of clarity):
var latlng = new google.maps.LatLng(latitudeFromForm,longitudeFromForm);
// This is creating a GeocoderRequest object
var geocoderRequest = {
'latlng':latlng
}
// This is making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// This checks to see if the Status is 'OK 'before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Do stuff with the result here
}
If you haven't read it yet, you may want to read the Reverse Geocoding section of http://code.google.com/apis/maps/documentation/javascript/services.html#ReverseGeocoding.
I am writing an iPad application that uses the MapKit control.
How do I get all my content into Google Maps. i.e. I have a bunch of locations along with photos, video, audio and various other information.
So when the iPad user loads my App and zooms into a certain place in the world I want my Annotations to be visible and when they touch the pins they get access to more information etc.
var myOptions = {
zoom: 4,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mp200 = new google.maps.Map(document.getElementById('dv200m'), myOptions);
var pos = new google.maps.LatLng(tLat, tLon);
var mrk2 = new google.maps.Marker({ position: pos, map: mp200, title: 'bla bla', icon: '/images/twitter.png' });