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.
Related
I want to show map of Serbia and add marker to Belgrade, I get the map to show but not the marker.
var mapOptions = {
center: new google.maps.LatLng(44.112251, 20.735648),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(document.getElementById('map'), mapOptions);
var markerOptions = {
position: new google.maps.LatLng(44.816037, 20.464954)
};
var marker = new google.maps.Marker(markerOptions);
marker.setMap(map)
I got all coordinates from google maps so that shouldn't be the issue.
Assign the new google map to a map variable :)
From:
new google.maps.Map(document.getElementById('map'), mapOptions);
To:
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
Does anyone know if its possible to center a embedded map on an actual placeholder? I mean so that that when the map loads and is centered you can actually see the landmark and the marker in the the map?
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
This is my initialise function that inputs the coordinates of the shop I want to have directions to. However there is not placeholder (pin marker) over the shop. Am I able to do that?
Thanks!
You need to explicitly specify the marker and set its position. Following your example...
var map_canvas = document.getElementById('map_canvas');
var position = new google.maps.LatLng(51.515727, -0.141388);
var mapOptions = {
zoom: 16,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
You have to then create the marker object...
var marker = new google.maps.Marker({
position: position,
map: map,
title: "ANYTHING YOU WANT"
});
That's all you need to do really, but notice that you can always change the center of the map at anytime...
map.setCenter(position);
For more info visit the Developer's Site API Reference
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var point = new google.maps.LatLng(51.515727, -0.141388);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
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>
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 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);
}