As per my question, I want to add an initial marker for the map, but it only shows me the marker when I enter address on load. If I want to show a marker like for longitude 41.008238 and latitude 28.978359, how can I make this possible? And sorry for my bad English.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
center: new google.maps.LatLng(41.008238, 28.978359),
zoom: 13
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var newPos = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setOptions({
center: newPos,
zoom: 15
});
var marker = new google.maps.Marker({
position: newPos,
map: map,
title:"market title"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas">Loading map...</div>
<style>
#map {
/* float:right;*/
width: 100%;
height: 400px;
border: 1px solid #DDD;
}
#map-canvas {
width: 100%;
height: 350px;
}
</style>
add the following
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.008238, 28.978359),
map: map,
title: 'market title'
});
below
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapOptions = {
center: { lat: latitude, lng: longitude},
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function(){
//lat0 = map.getBounds().getNorthEast().lat();
//lng0 = map.getBounds().getNorthEast().lng();
//lat1 = map.getBounds().getSouthWest().lat();
//lng1 = map.getBounds().getSouthWest().lng();
get_markers();
});
function get_markers(){
marker = new google.maps.Marker({
position: new google.maps.LatLng(latit, longit,
map: map
});
}
Related
I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.
Here is my code: What am I doing wrong?
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.
Is this why the marker is not been displayed?
Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case
Move your marker creation to the initialize function.
$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
console.log('map loaded');
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
makePin(42.745334, 12.738430);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
console.log('document loaded');
})
function makePin(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: 'This is the title'
});
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>
How can you make marker without loaded map. Map need to initialize first then marker will work
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
Here is the solution:
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
How do i get google truck location and heading to calculate street view heading properly in this example somehow i cannot do panorama.getLocation() it saying unknown however showing in firebug when i do console.log(panorama) and see object methods.
function initialize() {
var myPlace = {lat: 33.976827,lng: -118.163889};
var map = new google.maps.Map(document.getElementById('map'), {
center: myPlace,
zoom: 18
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: myPlace
});
marker = new google.maps.Marker({
position: myPlace,
map: map
});
marker_pano = new google.maps.Marker({
position: myPlace,
map: panorama
});
var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
panorama.setPov({
heading: heading,
pitch: 0
});
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
http://jsfiddle.net/z3b4ubb3/
In addition to #geocodezip solution, here is another way to achieve what you want:
var panorama, myPlace;
function initialize() {
myPlace = {
lat: 33.976827,
lng: -118.163889
};
var map = new google.maps.Map(document.getElementById('map'), {
center: myPlace,
zoom: 18
});
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
position: myPlace
});
var marker = new google.maps.Marker({
position: myPlace,
map: map
});
map.setStreetView(panorama);
var sv = new google.maps.StreetViewService();
sv.getPanorama({
location: myPlace,
radius: 50
}, processSVData);
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker_pano = new google.maps.Marker({
position: myPlace,
map: panorama
});
var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, marker_pano.getPosition());
panorama.setPov({
heading: heading,
pitch: 0
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
JSFiddle demo
The panorama is asynchronous. To get its position, wait for the position_changed event to fire:
google.maps.event.addListener(panorama, 'position_changed', function () {
var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
panorama.setPov({
heading: heading,
pitch: 0
});
});
updated fiddle
I have an input field where user enters the address. Google Maps API autocompletes it, and subsequently repositions map marker and is supposed to move the map to that location.
var map_location = new google.maps.LatLng(45.815015, 15.981912);
var marker;
var map;
var autocomplete;
function initialize() {
var mapOptions = {
zoom: 13,
center: map_location
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
position: map_location
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("lat_hidden").value = this.getPosition().lat();
document.getElementById("long_hidden").value = this.getPosition().lng();
});
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),
{types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
map_location = new google.maps.LatLng(
parseFloat(document.getElementById("lat_hidden").value),
parseFloat(document.getElementById("long_hidden").value)
);
marker.setPosition(map_location);
map.panTo(map_location);
});
}
The last line of code causes infinite recursion. I also tried .setCenter. Firefox traced recursion to maps.gstatic.com script which keeps calling its own two functions.
What is causing the problem and how can I fix it?
You are not setting up the lat_hidden and long_hidden fields on the place_changed event. So this code doesn't create a valid google.maps.LatLng():
map_location = new google.maps.LatLng(
parseFloat(document.getElementById("lat_hidden").value),
parseFloat(document.getElementById("long_hidden").value)
);
working code snippet:
var map_location = new google.maps.LatLng(45.815015, 15.981912);
var marker;
var map;
var autocomplete;
function initialize() {
var mapOptions = {
zoom: 13,
center: map_location
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
position: map_location
});
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("lat_hidden").value = this.getPosition().lat();
document.getElementById("long_hidden").value = this.getPosition().lng();
});
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'), {
types: ['geocode']
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
document.getElementById("lat_hidden").value = autocomplete.getPlace().geometry.location.lat();
document.getElementById("long_hidden").value = autocomplete.getPlace().geometry.location.lng();
map_location = new google.maps.LatLng(
parseFloat(document.getElementById("lat_hidden").value),
parseFloat(document.getElementById("long_hidden").value)
);
marker.setPosition(map_location);
map.panTo(map_location);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input id="lat_hidden" />
<input id="long_hidden" />
<input id="autocomplete" />
Hi guys anybody know how to get latitude and longitude by type on google map using PHP or Javascript?
for example, I want to get all restaurant on this location:
location: United Kingdom, devon
type:restaurant
it should return name of restaurant, latitude, longitude.
any help would be appreciated :)
Check this
$(function () {
var lat = 44.88623409320778,
lng = -87.86480712897173,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng":event.latLng
}, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});
Working demo fiddle
HTML AND JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="default.css"
rel="stylesheet">
<title>Places search box</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
var input = /** #type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id="map-canvas"></div>
</body>
</html>
AND CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
REFER HERE FOR MORE ! GOOGLE PLACES
I do not know what is wrong with my code for displaying a map marker for my address. I have looked on the google development site as well as blogs and stack overflow posts but seem to not be able to understand it or for some reason can not effectively implement it into my code. I want a marker to display for an address on a map, that when clicked will take them to a URL for google maps of that location.
My CSS:
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,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
My HTML:
<div style="height: 277px; width: 964px; z-index; 1;">
<div id="map-canvas" style="margin: 0; padding: 0; height: 100%;"></div>
</div>
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("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
EDIT:
How do I link the marker to a URL?
var infowindow = new google.maps.InfoWindow({
content: "<a href='http://www.google.com'>Visit Google!</a> "
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});