I wrote a script to add maps to my website. It is as follows:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML code:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>
css:
#map{
width: 500px;
height: 400px;
}
I added this code for pin pointing a location:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
But when I used that code, map on my page disappeared. How can I make it to work?
You are creating map two time on same div that's why its happening just change your code as below:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
there is no need to add var map = new google.maps.Map(mapCanvas, mapOptions);
second time
Related
I am trying to put two separate markers on two separate maps that are positioned side by side on my website.
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
}
</script>
You can create a simple maker for this.
Just place this in your code after map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
And after map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
Example
Your code should look like this:
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
}
</script>
That code by itself will not put any markers on the map, it will simply render the maps, with each one centred on the latitude/longitude you specify.
Look at the first example on https://developers.google.com/maps/documentation/javascript/markers for an idea of how to add a marker to each of your maps.
am new in java script, am sorry if Q stupid.
in my code i have a center position with lat and long , i hava another function to update the center position .
the problem: i want to change marker position from center position to new center position when call pan() function.
var panPoint;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
var marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.panTo(panPoint)
}
If you want to change the marker position also, you need to make the reference to it global (like you did with panPoint), define it outside of any functions, remove the var from in front of it inside your myMap function. Note that you also need to make map global as well, for the center to actually change.
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
Then move it when you call your pan function:
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
proof of concept fiddle
code snippet:
var panPoint;
var map;
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="32.224063" />
<input id="lng" value="35.230539" />
<input id="btn" type="button" onClick="pan();" value="pan" />
<div id="googleMap"></div>
I need to generate a google map in a web page using latitude and longitude. But map is not shown. SO far i have tried is as follows -
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<div id="map"></div>
<script>
function initialize(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
google.maps.event.addDomListener(window,'load', initialize);
$(document).ready(function (){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
</script>
How can i generate the map? Could not find any error there. Please help me.
You are adding your code multiple times
This works:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
google.maps.event.addDomListener(window,'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:380px;"></div>
</body>
</html>
Fiddle example: https://jsfiddle.net/eugensunic/wexd3spp/1/
CodePen example: http://codepen.io/anon/pen/QjZgpw
I have a problem with a google map on my website not loading but there is still something in the container except a white background, indeed I can see the terms at the bottom right and the satellite button at the top right.
There is the code, I hope you will be able to spot what is wrong :
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize());
In you code mapCanvas seems to be unassigned. After adding something like var mapCanvas = document.getElementById('map'); the map loads as intended.
JSFiddle
Got it working.
I've added googleapis link "https://maps.googleapis.com/maps/api/js?sensor=false">.
And I've changed var map = new google.maps.Map(mapCanvas, mapOptions); to var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
And i have removed empty parentheses in the maps event listener.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px;
height: 600px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
I'm using this code:
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(50.077861,14.456956);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(\"searchMap\"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Here we are!'
});
}
</script>
But now I need to show multiple markers on the map, and the markers should include links to subpages of the website, any ideas how to menage that width the code I posted?
Thanks, Mike.