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');
Related
I am using symfony2 and I trying to initialise a google map on a page.
This is my js
<script type="text/javascript">
function initialize(address) {
var geoCoder = new google.maps.Geocoder(address)
var request = {address:address};
geoCoder.geocode(request, function(result, status){
var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng());
var myOptions = {
scrollwheel: false,
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var image = '{{ asset('/images/map_marker.png') }}';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({position:latlng,map:map,title:'title',icon:image});
var input = document.getElementById('inputCity');
var options = {
types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
})
}
</script>
This is how I initialise the map
<script>
$(document).ready(function(){
initialize('Athens Greece');
})
google.maps.event.trigger(map, "resize");
</script>
This is how I display the map
<div style="height:100%; width:100%;">
<div class="svmMap" id="map_canvas" ></div>
<!-- tried this also <script> initialize('Athens,Greece'); </script> -->
</div>
This is how it's displayed
I have attached a button with the initialise function that refreshes the map and displays an address from an input box. It works 100%.
Any ideas why should it happen when initialised the first time ?
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"));
});
I'm trying to use Google Maps on my site. I use this code
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
So In FF it throws an error c[Db] is not a function
...Db](d);c.e=new Ff;c.Yb=new Mf;c.mapTypes=new Sf;c.features=new Af;var e=c.Zb=new...
How can I debug this error or fix?
}
You've omitted the new-operator when creating the map, it has to be:
var map = new google.maps.Map(document.getElementById(id+'-canvas'), myOptions);
//________^
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.
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
});
}