I haven't been able to find this answer in the Maps API documentation, but is it possible to have an "inset" map using the Google Maps API?
It seems like it is doable with the Maps Embed API (see lower left corner), but you can't customize the map with this API.
I ended up making my own. I don't know why this question was downvoted. Anyway, check out my JSFiddle here: http://jsfiddle.net/wLuhktu4/1/
function initialize() {
var mapOptions = {
zoom: 17,
center: {
lat: -33.8666,
lng: 151.1958
},
disableDefaultUI: true
};
var overviewMapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: {
lat: -33.8666,
lng: 151.1958
},
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var overviewMap = new google.maps.Map(document.getElementById('overview-map'), overviewMapOptions);
google.maps.event.addListener(map, 'bounds_changed', (function () {
overviewMap.setCenter(map.getCenter());
overviewMap.setZoom(map.getZoom());
}));
}
google.maps.event.addDomListener(window, 'load', initialize);
The problem (although minor) is that because this is not officially supported, the watermark and terms of use take up a lot of space on this inset map.
I hope this helps someone in the future.
Related
I am trying to allow a user to draw a shape in Google Maps using the map.data features layer. As soon as the user finishes drawing, I want to process the coordinates of the shapes they just drew and then immediately remove it from the map. The first shape deletes fine, but after the first they still process and appear to empty out of the object (tested by using the map.data.toGeoJson to log it to the console where it shows the map.data object but with no features present) but they are still visible on the map.
To see what is happening, in the fiddle draw a polygon and on completion (double click) it disappears because it is deleted after processing (which is what should happen). However, when a second or more polygons are drawn they stay visible on the map.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
map.data.setControls(['Point', 'LineString', 'Polygon']);
map.data.addListener('addfeature', function(event) {
event.feature.getGeometry().forEachLatLng(function(latLng) {
//do stuff with the feature
});
map.data.remove(event.feature);
});
}
Fiddle: https://jsfiddle.net/km76tvhp/13/
This is strange behavior and it could possibly be a bug. As a workaround, you could use the Drawing Library. Here is an example below which uses the google.maps.drawing.DrawingManager. It's very similar to drawing using the google.maps.Data class.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: ['marker', 'polygon', 'polyline']
},
polygonOptions: {
editable: true,
draggable: true,
strokeColor: 'red'
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
polygon.getPath().getArray().forEach(function(latLng){
// do stuff with the feature
});
polygon.setMap(null);
});
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=drawing" async defer></script>
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.
Is it possible to show the default Google Maps icon and popup on a custom map?
The default one with the address, title directions nearby etc etc.
This is how i've currently got it set up and working fine apart from the marker..
var map;
jQuery(function($) {
function initialize() {
var styles = [
{
stylers: [
{ "saturation": -100 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
});
Is it possible to show the default Google Maps icon and popup on a custom map?
The default marker is easy, see the documentation, but the answer for the Google Maps default infowindow is no, but you can create your own infowindow that looks similar and has similar functionality.
I have a very simple set up of a google map. I want to interact with the map using a link outside of the map, so I'm using google.maps.event.addDomListener(), but my events are not being detected. Can anyone help? Jsfiddle here: http://jsfiddle.net/kqUwE/4/
function initialize() {
var myLatlng = new google.maps.LatLng(51.507, -0.1275);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addDomListener(document.getElementById("click_me", 'click', function () {
alert(document.getElementById("click_me"));
}));
}
window.onload = function() {
initialize();
};
Solved it:
Misplaced bracket, should be this instead:
google.maps.event.addDomListener(document.getElementById("click_me"), 'click', function () {
alert(document.getElementById("click_me"));
});
Im having some problems with a street view map: http://server.patrikelfstrom.se/johan/fysiosteo/?page_id=118
Sometimes the window gets grey instead of showing the streetview. So my question is; Is there any way to know when the map has finished loading? I guess its treying to render the map before its completly loaded? Thanks
function initialize() {
var myLatlng = new google.maps.LatLng(57.6988062, 11.9683293);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Fysiosteo"
});
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 90,
pitch: 0,
zoom: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'idle', function() { console.log('done'); });
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
I tried with this code to print "done" to the console when the map has finished loading, but it didnt work. Am i doing it wrong? :)
The answer to your specific question ("Is there any way to know when the map has finished loading?") is: Yes. When a Map object is finished loading, it will trigger an idle event. Documentation of events that a Map object fires can be found at http://code.google.com/apis/maps/documentation/javascript/reference.html#Map.