How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.
Related
I am attempting to show a google maps marker via satellite view and street view at the same time. However, the marker placed on street view seems to change location (be slightly offset) depending on where along the street you are looking at it. In the examples below, you can see in one angle the marker is successfully on the grass and the satellite view matches the street view. However, if I navigate down the road one step, the marker is now on the driveway, despite the satellite view indicating otherwise. The same marker is used for all examples.
Any thoughts?
Example: https://jsfiddle.net/6Lpgoex2/
const startPosition = new google.maps.LatLng(33.82444502161826, -84.32112795727612);
// Aerial view map with marker
var locationMap = new google.maps.Map(document.getElementById('location'), {
center: startPosition,
zoom: 21,
mapTypeId: 'satellite'
});
locationMap.setTilt(0)
var locationMarker = new google.maps.Marker({
position: startPosition,
map: locationMap
});
// Street view map with marker
var viewMap = new google.maps.Map(document.getElementById('view'), {
center: startPosition,
zoom: 14
});
var viewMarker = new google.maps.Marker({
position: startPosition,
map: viewMap,
});
// Update streetview to look at the marker
var panorama = viewMap.getStreetView();
const panoramaService = new google.maps.StreetViewService();
panorama.setVisible(true);
panoramaService.getPanoramaByLocation(startPosition, 100, function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus == "OK") {
let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, startPosition);
const position = streetViewPanoramaData.location.latLng;
panorama.setPosition(position)
panorama.setPov({
heading: heading,
pitch: 0
});
panorama.setZoom(1); // Fix bug to make marker visible https://issuetracker.google.com/issues/35830290
panorama.setVisible(true);
}
});
Note: An issue has been opened.
We have a Google map on our website. We want to update latitude and longitude every 5 seconds (Call from MySQL) and change the marker place on the map, while the MAP or page don't reload with it.
Our JAVASCRIPT code is:
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);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
You have to use an AJAX call to a backend script that will return something like a JSON string with new marker data.
jQuery code:
setInterval(function () {
$.post('your-file.php', { }, function (r) {
var result = eval('(' + r + ')');
var newLatLng = new google.maps.LatLng(result.latitude, result.longitude);
marker.setMap(null);
/* Recreate the marker here or update coordinates from result.latitude and result.longitude */
});
}, 5000);
And this is your-file.php:
/* MySQL Query here */
echo json_encode('latitude' => $latitude, 'longitude' => $longitude);
Using marker.setMap(null) you can remove the marker from your map and then create it again with the correct coordinates otherwise just use marker.setPosition(newLatLng);
Hello guys I've got a simple question to ask, when I open my map I have set the lat and long to open some coords, then I place one marker with a infoBubble opening when the map is loaded, but after that the map opens in the maker position. I dont want that .. is it possible force the start location to open my map in the start position instead of the marker position?
thanks
function init() {
var mapCenter = new google.maps.LatLng(-8.799445,-63.922042);
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var myLatLng = new google.maps.LatLng(-8.802732,-63.921939);
var marker = new google.maps.Marker({ map: map,
position: myLatLng,
draggable: true,
icon: icon
});
}
By default the API when a InfoWindow will be opened tries to pan the map so that the infoWindow is fully visible.
Set the disableAutoPan-property of the infoWindow to true to avoid this.
I've a problem with my code. I can get the lat and lng to load from the xml file and display it on google maps, but it only displays the first record (there are 4 in total).
I'm 100% confident the xml is fine, I just can't figure out how to display all the markers on googles map.
Any help would be great!
function initialize() {
var myLatlng = new google.maps.LatLng(53.956086, -9.140625);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery.get("markers.xml", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var Lat = $(this).find('lat').text();
var Lng = $(this).find('lng').text();
var latlng = new google.maps.LatLng(parseFloat(sLat), parseFloat(Lng));
var marker = new google.maps.Marker({position: latlng, map: map});
});
});
}
Any logs/errors with tools like firebug?
looks good from what I can tell (2 problems: you initialize marker 2 times and sLat is not defined).
Are you sure it's looping each 4 times and not only once?
Had you debugged that?
I am trying to write a geo location webpage which displays the user's approximate location on a map. If they click on the marker they can drag it to their exact location.
I have this code to do the displaying of the map and dragging of the marker:
function initialize() {
navigator.geolocation.getCurrentPosition;
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true
});
google.maps.event.addListener(
marker,
'drag',
function() {
document.getElementById('lat').value = marker.position.lat();
document.getElementById('lng').value = marker.position.lng();
}
);
}
My question is how do I set the initial latitude and longitude in the above using the html5 geo location:
navigator.geolocation.getCurrentPosition;
Thanks
Andrew
Declare two variables for both the latitude and the Longitude as such:
position.coords.latitude = 35.8624596;
position.coords.longitude = -86.4081241;
then another variable for both the lat and long such as:
var latlon=lat+","+lon;
and then use latlon like this:
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";