I know the maps are loading, but for whatever reason I can't see them.
JS
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
MarkUp
<div id="map-canvas">
</div>
I know this must be simple and I'm a little confused why I can't work it out, but here is the link: http://stage.sexdiaries.co.uk/map
You need to give the map a size:
<div id="map-canvas" style="height:500px;width:600px;"></div>
Related
I want to show a location on google map but nothing show :
<script src="****/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvUNbVZUPT_8V-VMCcfI9aex3ygZO4J7U"></script>
jQuery(document).ready(function($) {
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 35.706291,
GOOGLE_MAP_LNG = 51.316624;
var map,
service;
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
});
my html code :
<div id="#map-canvas" style="width: 300px;height: 400px"> </div>
to see my website:
http://www.eleconf.ir/
my console log is empty.
In your html, the ID of div is given as #map-canvas. # is not required.
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);
I have this map working fine, i just wanted to add the default google click address marker and if not that a custom bubble for the address?
Anyone help me out, i'm sure its simple but cannot figure out whereabouts to put it..?
<script type="text/javascript">
var map;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
console.dir(map);
google.maps.event.trigger(map, 'resize');
$('a[href="#tab2"]').on('shown', function(e) {
google.maps.event.trigger(map, 'resize');
});
});
});
Many thanks..
Figured it out..
Anyone who needs a marker and for it to work with jQuery tabs try this..
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map2'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm starting to develop an application that will have Google Maps.
I studied the help of Google Maps Api and I'm with doubt to add an overlay. The below is the correct way to do it:
Create maps
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Add overload:
function add() {
var myLatlng = new google.maps.LatLng(-34.397, 150.646);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); /* It is correct?
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
marker.setMap(map);
};
Is there a way to get the mapsOptions, or rather not recaregar the map completely, or is this how it works?
remove the var-keyword when creating the map in initialize() .
When you do so, the map-variable is global accessible and you may call marker.setMap(map); inside add() without creating a new Maps-instance.
I am working on a simple web app using jquery mobile. I am attempting to show a google map which shows the visitors gps location on a map. The code below is what i'm currently using, however it shows specific co-ordinates instead.
Can anyone help me change this so that it shows the visitors location? I have tried several solutions but have had no luck. Thank you!
<script>
$('#map_result').live('pageshow',function(event){
loadMap(48.870181,2.779852);
});
function loadMap(Lat, Long){
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
Try this:
$('#map_result').live('pageshow', function (event) {
navigator.geolocation.getCurrentPosition(function (location) {
loadMap(location.coords.latitude, location.coords.longitude);
});
});
function loadMap(Lat, Long) {
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}