For known coordinates, I can set the various controls to false by specifying it in the mapOptions object
var mapOptions = {
position: new google.maps.LatLng(37.869260, -122.254811),
zoom: 1,
pov: {
heading: 165,
pitch: 0
},
addressControl: false,
panControl: false,
linksControl: false,
zoomControl: false,
};
map = new google.maps.StreetViewPanorama(mapDiv, mapOptions);
However, when using getPanoramaByLocation
latLng = new google.maps.LatLng(34,34);
radius = 500000
var sv = new google.maps.StreetViewService();
var map = new google.maps.StreetViewPanorama(mapDiv)
sv.getPanoramaByLocation(latLng, radius, function(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var nearStreetViewLocation = data.location.latLng;
map1.setPosition(nearStreetViewLocation);
map1.setZoom(1);
map1.setPov({
heading: 270,
pitch: 0
});
map1.setVisible(true);
}
});
I cannot find any methods like setPanControl or setZoomControl. How can I modify these controls when I am not declaring options in a single object?
For options where no specific setter-method is available use the set-method of MVCObject:
map1.set('panControl',true);
you may also set multiple options without the constructor by using setValues:
map1.setValues({ zoom:1,
pov:{
heading: 270,
pitch: 0
},
position:nearStreetViewLocation,
visible:true,
panControl:true,
zoomControl:true
});
Related
We're currently getting routes using the v8 endpoint seen at:
https://developer.here.com/documentation/routing-api/api-reference-swagger.html
For each route, we'd like to get all administrative divisions/regions/boundaries such as states, counties, cities, etc (for United States). How might we go about doing this?
We've thought about using HERE polylines in tandem with OpenStreetMap but I would hope that there might already be a solution for this?
you can use map tile api to to show map in the background as shown in this sample example : https://demo.support.here.com/examples/v3.1/simple_routing
(function(){
/*
author
(C) HERE 2019
*/
var mapContainer = document.getElementById('mapContainer');
// check if the site was loaded via secure connection
var secure = (location.protocol === 'https:') ? true : false;
var platform = new H.service.Platform({
useHTTPS: secure,
apikey: api_key
}),
defaultLayers = platform.createDefaultLayers(),
router = platform.getRoutingService(),
map = new H.Map(mapContainer, defaultLayers.vector.normal.map,
{
center: center,
zoom: zoom,
pixelRatio: window.devicePixelRatio || 1
}
);
// Do not draw under control panel
map.getViewPort().setPadding(0, 0, 0, $('.ctrl-panel').width());
// add behavior control
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Enable the default UI
var ui = H.ui.UI.createDefault(map, defaultLayers);
window.addEventListener('resize', function() { map.getViewPort().resize(); });
function calculateRoute()
{
var calculateRouteParams = {
'waypoint0' : '52.516222,13.388900',
'waypoint1' : '52.517175,13.395129',
'mode': 'fastest;car;traffic:disabled',
'representation': 'display'
},
onResult = function(result) {
var lineString = new H.geo.LineString(),
routeShape = result.response.route[0].shape,
polyline;
routeShape.forEach(function(point) {
var parts = point.split(',');
lineString.pushLatLngAlt(parts[0], parts[1]);
});
var polyline = new H.map.Polyline(lineString,
{
style:
{
lineWidth: 10,
strokeColor: "rgba(0, 128, 0, 0.7)"
}
});
map.addObject(polyline);
map.getViewModel().setLookAtData({
tilt: 45,
bounds: polyline.getBoundingBox()
});
},
onError = function(error) {
console.log(error);
}
router.calculateRoute(calculateRouteParams, onResult, onError);
}
var displayReady = function(e)
{
map.removeEventListener("mapviewchangeend", displayReady);
calculateRoute();
};
map.addEventListener("mapviewchangeend", displayReady);
})
how can add current location on map default
show me only latlng show here
$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
var map;
map_initialize(); // initialize google map
//############### Google Map Initialize ##############
function map_initialize()
{
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 16,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
I'm trying to add a marker with a InfoWindow attached to it.
The marker is visible in both maps i.e., Street view and normal map.
But, InfoWindow only gets displayed in normal map but not when its opened in street view.
There's no error in firebug console.
The code :
var a = google.maps;
var b = {
center: new a.LatLng(parseFloat(ll[0]),parseFloat(ll[1])),
zoom: zoom,
mapTypeId: a.MapTypeId.ROADMAP,
streetViewControl: true,
mapTypeControlOptions: {
mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN]
},
panControl: false,
zoomControlOptions: {
style: a.ZoomControlStyle.SMALL
}
};
map = new a.Map(document.getElementById("map-canvas"), b);
panorama = map.getStreetView();
panorama.setPosition(new google.maps.LatLng(42.345573,-71.098326));
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 270,
pitch: 0
}));
panorama.setVisible(false);
iw = new a.InfoWindow();
a.event.addListener(map, "click", function () {
if (iw) iw.close()
});
var g = new a.Marker({
position: c,
map: map,
clickable: true,
draggable: true,
optimized: false,
raiseOnDrag: false,
zIndex: highestOrder()
});
var description = "<h2>"+document.getElementById('marker-title').value+"</h2><br/><p style='width:200px;'>"+document.getElementById('marker-desc').value+"</p>";
a.event.addListener(g, "click", function () {
actual = g;
iw.setContent(description);
if(map.getStreetView().getVisible == true) {
iw.open(map.getStreetView(), this);
}
else {
iw.open(map, this);
}
});
a.event.addListener(g, "dragstart", function () {
if (actual == g) iw.close();
z_index += 1;
g.setZIndex(highestOrder())
})
To test if the div is showing streetView imagery or a map use:
if (map.getStreetView().getVisible()) {
Not:
if(map.getStreetView().getVisible == true) {
(you aren't calling the method ...)
the click listener should be:
a.event.addListener(g, "click", function () {
actual = g;
if (map.getStreetView().getVisible()) {
iw.setContent(description);
iw.open(map.getStreetView(), this);
} else {
iw.setContent(description);
iw.open(map, this);
}
});
working example
I need to plot multiple custom map markers using MapsV3 api either by an address or lat/lon. I put together the following code which works ok for lon/lat, but if the data contains an address the geocoder returns nothing. Any ideas on how to fix this.
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-27.0,133.0);
var options = {
panControl: false,
zoomControl: true,
scaleControl: false,
mapTypeControl: false,
streetViewControl: false,
zoom: 3,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), options);
var data = [
{
'title':'F C Building Construction ...',
'address':'',
'zindex':20,
'lat':'-33.797847',
'lon':'151.259928',
'marker_number':1,
'marker_html':' html content...',
'image': {
url:'//localhost/assets/images/markers/marker_1.png',
size: new google.maps.Size(24, 29),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(10, 29)
}
}];
setMarkers(map, data);
var infowindow = new google.maps.InfoWindow();
}
function showMapPin(i) { }
function setMarkers(map,data) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
setMarker(map, data[i], bounds);
}
map.fitBounds(bounds);
}
function setMarker(map, m, bounds) {
if(m["address"]!="") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": m["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var siteLatLng = results[0].geometry.location;
}
});
} else {
var siteLatLng = new google.maps.LatLng(m["lat"], m["lon"]);
}
if(siteLatLng) {
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
//shadow: shadow,
icon: m["image"],
title: m["title"],
zIndex: m["zindex"],
html: m["marker_html"]
});
bounds.extend(siteLatLng);
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
} // if latlng
}//]]>
After looking back over the code I realized that the variable siteLatLng is within geocode function scope so it never gets passed and it can't be returned. Setting the marker within this function works.
How can I add label to my marker if my markers are populated on ajax success each result.
map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });
I tried like this, but with no success:
map.gmap('addMarker', {
'position': new google.maps.LatLng(result.latitude, result.longitude),
'bounds': true,
'icon': markerIcon,
'labelContent': 'A',
'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
'labelClass': 'labels', // the CSS class for the label
'labelInBackground': false
});
If you just want to show label below the marker, then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this..
<script type="text/javascript">
var point = { lat: 22.5667, lng: 88.3667 };
var markerSize = { x: 22, y: 40 };
google.maps.Marker.prototype.setLabel = function(label){
this.label = new MarkerLabel({
map: this.map,
marker: this,
text: label
});
this.label.bindTo('position', this, 'position');
};
var MarkerLabel = function(options) {
this.setValues(options);
this.span = document.createElement('span');
this.span.className = 'map-marker-label';
};
MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
onAdd: function() {
this.getPanes().overlayImage.appendChild(this.span);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })];
},
draw: function() {
var text = String(this.get('text'));
var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.span.innerHTML = text;
this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
this.span.style.top = (position.y - markerSize.y + 40) + 'px';
}
});
function initialize(){
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
map: gmap,
position: myLatLng,
label: 'Hello World!',
draggable: true
});
}
</script>
<style>
.map-marker-label{
position: absolute;
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
This will work.
I doubt the standard library supports this.
But you can use the google maps utility library:
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers
Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API.
You can now create your label marker like this:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(result.latitude, result.longitude),
icon: markerIcon,
label: {
text: 'A'
}
});
If you would like to see the 1 character restriction removed, please vote for this issue.
Update October 2016:
This issue was fixed and as of version 3.26.10, Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels.
The way to do this without use of plugins is to make a subclass of google's OverlayView() method.
https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView
You make a custom function and apply it to the map.
function Label() {
this.setMap(g.map);
};
Now you prototype your subclass and add HTML nodes:
Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
this.MySpecialDiv = document.createElement('div');
this.MySpecialDiv.className = 'MyLabel';
this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers
}
you also have to implement remove and draw functions as stated in the API docs, or this won't work.
Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
$('.myLabel')
.css({
'top' : position.y + 'px',
'left' : position.x + 'px'
})
;
}
That's the gist of it, you'll have to do some more work in your specific implementation.
You can now add a class name to the marker label via google.maps.MarkerLabel interface.
For example:
const marker = new google.maps.Marker({
position: position_var,
map,
label: {
text: 'label text',
className: "my-label-class",
},
title: "Marker Title",
});
For a full list of options see the google map reference doc:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel