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);
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 am trying to make marker moving and get lat lng. My code works correctly.but Now I want to set my map center as my current location. I am trying with geo location code but when i add getCurrentPosition then map not showing.
my moving marker map code is
var marker, map;
function initialize() {
var myLatlng = new google.maps.LatLng(53.871963457471786,10.689697265625);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
$(function() {
initialize();
google.maps.event.addListener(map, 'click', function(event) {
var lat=event.latLng.lat();
var lng=event.latLng.lng();
$('#latlng').val(lat+', '+lng);
marker.animateTo(event.latLng);
});
});
<input type="text" id="latlng" size="40" /><br />
<div id="map_canvas"></div>
This should be enough...
navigator.geolocation.getCurrentPosition(function(position) {
var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
//handle no geolocation
});
Just make sure you run this after the map is created.
By the way this is from Google Maps docs.
I'm following google map api and add the following code but not showing the marker
function initialize() {
var myLatlng = new google.maps.LatLng(27.7000, 85.3333);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(27.7000, 85.3333),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
You're creating your map after adding the marker to it, so it is null at that point
var map = new google.maps.Map(map_canvas, map_options);
marker.setMap(map);
you might have some javascript errors so look at the console log
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 using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.