I'm using google maps in my website. But I have a problem -- the maps takes the X and Y from the database and the maps show without any sign in the place like this
I want to add a sign or arrow in the maps like this
How do I do this?
The code Is
< script >
function initialize() {
var mapProp = {
center: new google.maps.LatLng('.$rows['
X '].', '.$rows['
Y '].'),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, "load", initialize);
< /script>
To add a marker, see the example in the documentation
code snippet:
function initialize() {
var mapProp = {
center: new google.maps.LatLng(34.683902942879214, -1.8800277035522868),
zoom: 11,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#googleMap {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
Related
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
});
}
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>
I use geolocation and I can view map my coordinates. Then, marker put the coordinate.
I want to change marker position.
My code here:
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='100%';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
This code get my location coordinates. How can i change marker position?
I am sorry Eren about the my previous answer.I misunderstood.I think , this is correct one what you needed.
Display latitude and longitude on marker movement
Refer this site
I found a solution in this page. My problem is solved with this.
refer this
and this site
var map;
var myCenter = new google.maps.LatLng(37, 35);
var markersArray = [];
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
clearOverlays();
var marker = new google.maps.Marker({
position: location,
map: map,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
moveBus() is getting called before initialize(). Try putting that line at the end of your initialize() function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo().
Demo: http: //jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
<script src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script> <div id = "map-canvas"> </div>
CSS:
#map-canvas {
height: 400 px;
width: 500 px;
}
Script:
function initialize() {
var myLatLng = new google.maps.LatLng(50, 50),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
moveBus(map, marker);
}
function moveBus(map, marker) {
marker.setPosition(new google.maps.LatLng(0, 0));
map.panTo(new google.maps.LatLng(0, 0));
};
initialize();
I want to show a Google Map, I have this code which does no work:
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY_is_setup_correctly"></script>
<script type="text/javascript">
function initialize(){
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758),
};
var map = google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
When I refresh my page I see no map and JavaScript console throws me this message:
GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.102 [HTTP/1.1 204 No Content 428ms]
Why my code fails?
You need to create a new instance of the Map class.
Instead of:
var map = google.maps.Map(map_container, settings);
Write:
var map = new google.maps.Map(map_container, settings);
You have a typo in your code, you are missing new before the google.maps.Map constructor. Your code should be:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
// add "new" before google.maps.Map constructor
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
code snippet:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>
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);
});