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>
Related
My google maps marker isnt showing up. I'm trying to just have a picture of a face as a marker. I can work my own images from there, but I cant get the image of a face to show. The mouseover changes, but the image doesnt show. (Its set on Sydney Australia)
function initMap() {
var onefivethree = {lat: 53.945574, lng: -1.179075};
var onefiveone = {lat: 54.958674, lng: -1.169075};
var Abs1 = {lat: 51.9583289, lng: -1.1750136000000566};
var Abs2 = {lat: 52.9658919, lng: -1.153685600000017};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: onefivethree
});
var marker = new google.maps.Marker({
position: onefivethree,
map: map
});
var marker2 = new google.maps.Marker({
position: onefiveone,
map: map
});
var marker3 = new google.maps.Marker({
position: Abs1,
map: map,
//icon: Absimage1
});
var marker4 = new google.maps.Marker({
position: Abs2,
map: map,
//icon: Absimage2
});
var image = 'https://drive.google.com/open?id=1YtVQYXvFwA4C76WawNBRy2bdKK_KdrkU';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
The last marker; beachMarker is the one that should just be a image of a random face!
Thanks
EDIT - Extra code
var marker4 = new google.maps.Marker({
position: Abs2,
map: map,
icon: 'Capture3.jpg'
});
You need to use a link to an image.
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
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 am trying to use google maps API but keep getting a grayed out box instead of a map:
My javascript:
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 16,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
This is what I get:
The weird part is some cooridents work and some don't... for example 0 latitude and 0 longitude renders a map.
The weird part is some cooridents work and some don't
some latitudes are valid, and some not.
The valid range for latitudes is about -85 to 85
Set the zoom to 0 and you'll see that your marker is outside of the map(earth)
function initialize() {
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 0,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#postmap{height:100%;margin:0;padding:0}
<div id="postmap"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
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'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.