function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var streetViewLayer= new google.maps.StreetViewCoverageLayer();
streetViewLayer.setMap(map);
}
you can see some orange and blue circle on the map, it is about inside street view. how do I get information like name,position...... from those orange/blue circle?
you can see the orange/blue circle if you zoom in a city,those circle means inside view location,I just need to collect those inside view's information
https://jsfiddle.net/1tdg6fwm/1/
Related
Hey guys I am trying to add a google map to a react project and I am getting a grey box with no errors. Any idea why. Here's the code:
componentDidMount: function(){
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 37.7749300, lng: -122.4194200},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
initMap();
}// end of cdm;
});
You should not be using document.getElementByID('map'). Is that a node inside this component you are trying to render the google.maps container?
This should really look like
function renderMap() {
// map node
var mapNode = ReactDOM.findDOMNode(this.refs.map);
new google.maps.Map(mapNode, {
zoom: 12,
center: {lat: 37.7749300, lng: -122.4194200},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
You need to add react-dom as a dependency.
I have one question,
why dose mouse events related to a map never fire when we are over marker
exp. having a mouse move listener added to a map is never called when we move over a marker
(there is not so called event propagation or bubbling).
This was actully working on maps v2!
Is it a bug, or its changed to this behavior in v3?
Blaze
Here is the example...
If you move around the map, the mapLabel is updated as should be
but if u move over the marker the mapLabel is never updated
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'MOUSEMOVE', function() {
document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random();
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'MOUSEOUT', function() {
document.getElementByID('markerLabel').innerHtml = '';
});
google.maps.event.addListener(marker, 'MOUSEOVER', function() {
document.getElementByID('markerLabel').innerHtml = 'Mouse over marker';
});
}
All google maps' data that is drawn placed on 7 layers. These layers are called Panes. According to what pane the drawing belongs , it can receive or not receive events. For more information look at the google.maps.MapPanes documentation.
UPDATE: Google maps draws all data on 7 panes. All panes are children of the same parent. For event bubbling it is neccessary that the relation of elements should be parent-child ( then child can bubble the event to parent ),but not sibling-sibling. In sibling-sibling relation, event is received by element with the highest z-index. This is the reason you don't get events bubbled from marker's pane to map's pane.
This is the code for generating map with a kml file
var myLatlng = new google.maps.LatLng(47.711516,-117.395075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
var geoLayer = new google.maps.KmlLayer(
'http://some.kml.url/kmllayer.kml',
{suppressInfoWindows: true,map: map});
geoLayer.setMap(map);
My problem is its always getting at max distance, zoom settings not working even if i try to map.setCenter() call, its still same.
Another question is when i draw polygons on map, is there any way to highlight inside color of it when someone mouse overs it.
2nd question. Draw an initial polygon with a fill opacity of 0 but stroke opacity of 1. Have two event listeners attached to the polygon, for mouseover and mouseout.
google.maps.event.addListener(polygon, 'mouseover', function() {
polygon.setOptions({fillOpacity:0.5});
}
google.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({fillOpacity:0.0});
}
I have a question relevant to Google Maps API. I am learning how to use the Google Maps API. I can just show the map in the div tag, but what I want is to be able to click on the map and show the marker and return the LatLng of the clicked point.
function initialize(v_lat,v_long,v_place) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map( document.getElementById("map_canvas") , myOptions );
}
here is the click event example
where you click on map marker place on that point and click on marker which will return the latlng of that location.
try this
var marker;
google.maps.event.addListener(map, 'click', function() {
if(marker==null){
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
alert("latlng" + marker.getPosition());
});
}
});
here is the link for google map v3 you can find all tutorials related to the map
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/events.html
I am trying to figure out how to turn one of the following three maps into a street view.
Road Map
Hybrid
Satellite
This is the code below that I use to generate three different google maps:
var map;
var map2;
var map3;
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var myLatLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas-1"),myOptions);
var myOptions2 = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map2 = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions2);
var myOptions3 = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map3 = new google.maps.Map(document.getElementById("map-canvas-3"),myOptions3);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"Map1" });
var marker = new google.maps.Marker({
position: myLatLng,
map: map2,
title:"Map2" });
var marker = new google.maps.Marker({
position: myLatLng,
map: map3,
title:"Map3" });
}
Here is the code for the map division:
<div id="maptabs">
<ul>
<li>Road Map</li>
<li>Hybrid</li>
<li>Satellite</li>
</ul>
<div id="maptabs-1">
<div id="map-canvas-1" class="map"></div>
</div>
<div id="maptabs-2">
<div id="map-canvas-2" class="map"></div>
</div>
<div id="maptabs-3">
<div id="map-canvas-3" class="map"></div>
</div>
</div>
How do I alter the map options for the satellite map to turn it into a street view instead? Thanks.
You can't do it by altering the MapOptions because a street view is not a MapType. The easiest thing to do is probably to programmatically instruct the map to show its StreetViewPanorama like so:
map3.getStreetView().setPosition(myLatLng);
map3.getStreetView().setVisible(true);
It's not as simple as Trott's answer because the POV will be wrong. I just spent several hours on this, and here's my answer, for those who end up on this question (since this is one of the questions I found, but the answer was of no use).
The street view POV is, by default, the direction the truck was facing when the image was shot (go figure). You need to get the location of the truck and the location of the house and calculate a "heading" from the first location to the second, then set your street-view location to that of the truck with the heading you just calculated:
// adrloc=target address
// svwloc=street-view truck location
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
if(sts==google.maps.StreetViewStatus.OK) {
var svwloc=dta.location.latLng;
var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
var svwmap=avwMap.getStreetView();
svwmap.setPosition(svwloc);
svwmap.setPov({ heading: svwhdg, pitch: 0 });
svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
svwmap.setVisible(true);
}
else {
...
}
Another trick/trap using street view is that you need to obtain the closest street view to your address location by repeatedly calling getPanoramaByLocation with an increasing distance until you are either successful or reach some maximum distance. I solve this using this code:
var SVW_MAX=100; // maximum street-view distance in meters
var SVW_INC=10; // increment street-view distance in meters
var svwService=new google.maps.StreetViewService(); // street view service
var svwMarker=null; // street view marker
// NOTE: avwMap is the aerial view map, code not shown
...
resolveStreetView(avwMap.getCenter(),SVW_INC);
...
var resolveStreetView=function(adrloc,svwdst) {
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
if(sts==google.maps.StreetViewStatus.OK) {
var svwloc=dta.location.latLng;
var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
var svwmap=avwMap.getStreetView();
svwmap.setPosition(svwloc);
svwmap.setPov({ heading: svwhdg, pitch: 0 });
svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
svwmap.setVisible(true);
}
else if(svwdst<SVW_MAX) {
resolveStreetView(adrloc,svwdst+SVW_INC);
}
});
}