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.
Related
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.
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.
I am unable to successfully add a google map to my dojo mobile application.
I have the following element in markup:
<div id="venue" dojotype="dojox.mobile.View" style="height:100%">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
And this script:
function initializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var node = dojo.byId("map_canvas");
var map = new google.maps.Map(node, myOptions);
}
Nothing appears when I execute the initializeMap function. I also tried to set the map variable to the node.innerHTML but only a sliver of the map appears on the top of the viewport.
The example in the dojo site only shows the source of the markup and not the script. What am I missing, please?
Here's snippets of HTML/Javascript I was able to get working.
Details
var latlng = new google.maps.LatLng(item.Latitude, item.Longitude);
if (global.map == null) {
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
global.map = new google.maps.Map(dojo.byId('map_canvas'), myOptions);
} else {
global.map.setCenter(latlng);
}
var view = dijit.byId('ObjectsListView');
view.performTransition('ObjectDetailView', 1, 'slide');
If I already displayed a google map marker.
How could I change its icon using Jquery?
Thanks in advance.
Actually Google Maps API has supported method to setImage for marker. I get this code from Google Code PlayGround (http://code.google.com/apis/ajax/playground/#custom_marker_image_v3)
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}