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
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.
I have been trying to get two(need three) Google maps to work on my project.
I have got the first one working with this;
<div class="map" id="map"></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Now when I try to get a second one working it just doesn't work. I have tried to find other solutions but to no luck.
These two other maps are on a different page than this one above.
From looking at some stuff could it be as simple as below? I have tried things similar to this with no luck as well.
<div class="map" id="map"></div>
<div class="map" id="map__2"></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru,
map: map
});
}
I think I might be making this way harder than it needs to be, but I have found it strange that Google themselves don't have an example(they might do I just haven't seen it) for this.
Thanks for the help.
Be sure you have proper width and heigth for the two div
and be sure you have an event for trigger the initMap() exacuption
and be sure that the two maps use the related map object map and map_SecondMap
<div class="map" id="map" style='height: 300px; width:300px'></div>
<div class="map" id="map2" style='height: 300px; width:300px'></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map2'), {
zoom: 4,
center: uluru_SecondMap
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru_SecondMap,
map: map_SecondMap
});
}
google.maps.event.addDomListener(window, 'load', initMap);
I'm not sure what you are doing wrong. I was able to use your code almost as is to get two maps on the same page. Two things I changed:
I made sure both divs had dimensions
I changed you second marker to be applied to map_SecondMap
Here's the entire HTML that works,just in case you see something that's different than yours:
<html>
<head>
<style>
.map{
width: 300px;
height: 300px;
margin: 50px;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
type="text/javascript"></script>
</head>
<body>
<div class="map" id="map"></div>
<div class="map" id="map__2"></div>
<script>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru,
map: map_SecondMap
});
}
</script>
</body>
</html>
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
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.