First of all, I'm not really sure if this question is really for Stack Overflow, please tell me where I should move it if it's necessary.
Is it possible to add custom pins (map markers) in Google Maps Street View? If the answer is "yes" please provide additional information about how it can be done (links to sources, tips, etc.). Tried searching on Google for "google maps street view markers" but I couldn't find anything relevant.
Yes is possible
you can easy found sample like this on google dev
this is the js sample code by google development
var panorama;
function initMap() {
var astorPlace = {lat: 40.729884, lng: -73.990988};
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
center: astorPlace,
zoom: 18,
streetViewControl: false
});
// Set up the markers on the map
var cafeMarker = new google.maps.Marker({
position: {lat: 40.730031, lng: -73.991428},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: {lat: 40.729681, lng: -73.991138},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: {lat: 40.729559, lng: -73.990741},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
Related
I am wanting to put my own custom label over certain places on a map, take for example the image below where there is text for Albert Park Lake which is not associated with a place marker. This is an example of what I am wanting to do as I am designing an app that has a number of regions and I wanting to put the names of those regions on the map which will only be visible at certain zoom levels as to ensure there is no clutter when being viewed by the user. I had experimented with place markers but found that the text being on top of the marker was bad look and I would have had to write a function to adjust the text visibility for the zoom level to deal with the clutter of many being on the screen at once.
Cheers Jordan Smith
I suggest to convert the text you want to set to bitmap image and set this bitmap as custom marker, you may find this question useful if you want to know how to convert text to bitmap.
Here are a few things you could try:
1. Pop up multiple infowindows: https://jsfiddle.net/kjqfs0bo/
function initMap() {
const uluru = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
const contentString ="lalala";
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
const infowindow2 = new google.maps.InfoWindow({
content: contentString,
});
const marker = new google.maps.Marker({
position: uluru,
map,
title: "Uluru (Ayers Rock)",
});
const marker2 = new google.maps.Marker({
position: { lat: -20.363, lng: 130.044 },
map,
title: "Uluru (Ayers Rock)",
});
infowindow.open(map, marker);
infowindow2.open(map, marker2);
}
2. Invisible markers with text label: https://jsfiddle.net/0koynbz2/1/
function createMarker() {
var canvas, context;
canvas = document.createElement("canvas");
return canvas.toDataURL();
}
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
center: new google.maps.LatLng(56.1304, -106.3468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.1304, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(56.1204, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place2',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
3. Maybe try geojson, but since geojson only supports point, line and polygon. I'm not sure if there is a way to display text only.
using google map api i want to get path of road using just the address
what i have made so far
code
<script type="text/javascript">
var geocoder;
var map;
var infoWindow;
function initMap() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 0, lng: -180},
});
/* var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});*/
codeAddress();
infoWindow = new google.maps.InfoWindow;
}
function codeAddress() {
geocoder.geocode( { 'address': "my adress goes here"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var obj1={lat:results[0].geometry.bounds.j.H,lng:results[0].geometry.bounds.H.H};
var obj2={lat:results[0].geometry.bounds.H.j,lng:results[0].geometry.bounds.j.j};
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:"my address "
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
what i need is to get start of the address and the end so that i can use polyline using google api any idea how to achieve this, thank you
What I need is to get start of the address and the end so that i can use polyline using google api any idea how to achieve this?
You can make use of google.maps.Polyline({params});
From the Map sample:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Additional reading from the Maps Polyline docs:
Polylines
To draw a line on your map, use a polyline. The Polyline class defines a linear overlay of connected line segments on the map. A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.
Add a polyline
The Polyline constructor takes a set of PolylineOptions specifying the LatLng coordinates of the line and a set of styles to adjust the polyline's visual behavior.
Polyline objects are drawn as a series of straight segments on the map. You can specify custom colors, weights, and opacities for the stroke of the line within the PolylineOptions when constructing your line, or you can change those properties after construction. A polyline supports the following stroke styles:
strokeColor specifies a hexadecimal HTML color of the format "#FFFFFF". The Polyline class does not support named colors.
strokeOpacity specifies a numerical value between 0.0 and 1.0 to determine the opacity of the line's color. The default is 1.0.
strokeWeight specifies the width of the line in pixels.
The polyline's editable property specifies whether users can edit the shape
I am trying to allow users to save their markers lat and lng to their google account. It works fine for the first marker, but then stops working for subsequent markers.
For example load the fiddle bellow then
1. click the left marker (saving is allowed)
2. click the marker on the right (saving is NOT allowed)
3. reload the fiddle(refresh the page)
4. this time click the RIGHT marker (saving is allowed)
5. click the marker on the left (saving is NOT allowed)
https://jsfiddle.net/74zfffj3/
How to I allow all markers to be saved to user google account, and not just the first marker clicked?
I can enable save on multiple markers/infowindows if I provide a placeId and a location for each marker.
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.4948543, lng: -81.3695635},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.373129, lng: -81.438245},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
proof of concept fiddle
code snippet (doesn't seem to work with "signed_in=true"):
function initMap() {
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 44.429734680509064,
lng: -81.52421951293945
}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.4948543,
lng: -81.3695635
},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.373129,
lng: -81.438245
},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow1 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
var infoWindow2 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow1.setContent("Southampton, CA");
infoWindow1.open(map, marker);
});
marker2.addListener('click', function() {
infoWindow2.setContent("North Bruce, CA");
infoWindow2.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true"></script>
<div id="map"></div>
I want to tag (or mark) a building (or object) on Google street view in my web pages, and i find a solution that works on Android APP (JavaScript/WebView) in the article" I want to add popover/overlay/hotspot on the streetview of google map in android." But the solution is not for web pages.
Is any solution available for web pages?
Thank you all in advance!
Use google.maps.Marker class
function initialize() {
var hongkongolympic = new google.maps.LatLng(22.320701, 114.160688);
var mapOptions = {
center: hongkongolympic,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: hongkongolympic,
map: map,
title: "Hello World!"
});
var panoramaOptions = {
position: hongkongolympic,
pov: {
heading: 150,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var marker2 = new google.maps.Marker({
position: hongkongolympic,
map: panorama
});
}
google.maps.event.addDomListener(window, 'load', initialize);
How can I change the label for pins in an embedded google maps?
Ive figured out how to change the marker to my icon, but I need to restyle the A, B, C etc similar to how travelodge do for there map http://www.travelodge.co.uk/hotels/book/edinburgh-hotels
UPDATE this is the code that successfully uses a custom marker:
function addMarker(latlng, myTitle) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png"
}));
}
Ive included markerwithlabel.js However this doesn't create any markers at all:
function addMarker(latlng, myTitle) {
markers.push(new MarkerWithLabel({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png",
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
}));
}
This is the code I was tying to adapt:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html
If you managed to change the marker icon, then you did all the work.
A marker does not have a label. What travelodge does is that it has markers for each letter and then sets them according to the search results.
EDIT:
It seems there's a special library to do what you want (go to "Styled Marker"):
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
To see the code click in "Development versions", then "Examples" and then look at the source code of the pages. Here's the Simple example code:
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"I'm a marker!"}),position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});
var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
}
You can read more about markers on this link