I am working on javascript,Right now i am trying to display google map using "lat long" but map is not displaying,How can i do this ? Here is my current complete code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script>
$(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>
</head>
<body>
<div id="map"></div>
</body>
</html>
Related
The script isn't rendering the map.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
margin: 0;
padding: 0;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div style= "Height:100% Width:100%;">
<div id ="map-canvas"></div></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -27.3818611, lng: 152.7130136},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<crimes.length; i++){
var marker = new google.maps.Marker({
position: places[i].lat, places[i].lng,
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
</body>
</html>
document.getElementById('map') should be document.getElementById('map-canvas')
Nevermind I fixed it.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.363, lng: 131.044},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<places.length; i++){
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
</body>
</html>
The issue was with not closing brackets etc.
When I run my code, the map doesn't display. I am working on my localhost. I want to put lat and lng to inputs. Then when I change the lat and lng the inputs will change dynamically. How can I solve this problem?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});
marker.addListener('dragend',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});}
</script>
</body></html>
You have some bugs in your code.. and you are not calling the function
initialize(). Try this updated code
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
}
initialize();
</script>
</body></html>
Here I can save selected coordinates. İt may help someone.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<p id="results">result</p>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var coords = [];
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
coords.push(event.latLng.lat());
coords.push(event.latLng.lng());
$("#results").append('<div>'+JSON.stringify(coords)+'</div>');
coords = [];
});
}
initialize();
</script>
</body></html>
I have made a map with Google from this:
Google API
But I would like to put in 8 more pins, that should illustrate the places I have been in the world. But I dont have an idea if I can do that from that code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var place_1 = {lat: -25.363, lng: 131.044};
var place_2 = {lat: 55.971232, lng: 9.854725};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
</body>
</html>
You can use as many markers as you want:
function initMap() {
//this is different:
var places = new Array();
places.push({lat: -25.363, lng: 131.044});
places.push({lat: 55.971232, lng: 9.854725});
//push all of remaining places
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
//and this is different:
var markers = new Array();
for(var i = 0; i < places.length; i++){
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(places[i].lat, places[i].lng),
map: map,
title: 'Hello World!'
}));
}
}
Im trying to create a map that contains markers with different colors;
Red: http://maps.google.com/mapfiles/ms/icons/red-dot.png
Yellow: http://maps.google.com/mapfiles/ms/icons/yellow-dot.png
As you can see bellow, I used the Google Maps API and the OverlappingMarkerSpiderfier (because I've some markers that are setted at the same point), but all the markers are red (with the standart icon marker, not my custom )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<title>My test</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head> <style type="text/css">
html, body { height:100%; width:100%;}
</style><body>
<div id="map" style="width:100%; height:100%;"></div>
</body>
<script type="text/javascript">
var locations = [
['test', -27.23, -52.02,1,"http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
['test', -15.79, -47.88,10,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"],
['test', -3.73, -38.52,11,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
panControl:false,
zoomControl:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
center: new google.maps.LatLng(20.5, 15.6),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true,keepSpiderfied : true});
var iw = new google.maps.InfoWindow();
oms.addListener('click', function(marker, event) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
iw.close();
});
oms.addListener('unspiderfy', function(markers) { });
var marker, i;
for (var i = 0; i < locations.length; i ++) {
var datum = locations[i][0];
var loc = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][3]
});
marker.desc = datum;
oms.addMarker(marker);
}
</script>
</body>
</html>
Does anyone know why this is not working or where I went wrong?
Thanks in advance!
Sorry for that guys, the problem was the number informed in the icon. It was 4 and not 3.
var marker = new google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][4]
});
Hey guys I just started a new project with google maps. I'm a newbie in both javascript and google maps API.
UPDATED:
What I'm trying to do is to add a informationWindow to each marker with different content. So when the marker is clicked, the content for that specific marker pops up.
Right now only the 4th element pops up. I need so that every marker pops up with information.
Is there any other way of doing this?
Thanks in advance,
UPDATED:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(53.014783, -95.097656);
var iterator = 0;
var neighborhoods = new Array(
new Array("test1","49.165206","-122.665443"),
new Array("test2","49.14476","-121.98544"),
new Array("test3","49.162063","-122.667675"),
new Array("test4","48.455005","-123.54155"),
new Array("test5","51.038156","-114.035339")
);
var markers = [];
function initialize()
{
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
/*for (var i = 0; i < neighborhoods.length; i++)
{
markers[iterator] = new google.maps.Marker(
{
position: neighborhoods[iterator],
map: map,
title: 'Hello World!'
}
);
iterator++;
};*/
var infowindow = new google.maps.InfoWindow({
});
for(var i = 0; i < neighborhoods.length; i++)
{
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
map: map,
title: neighborhoods[i][0]
}
);
var test = neighborhoods[i][0];
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.open(map,marker);
infowindow.setContent(test);
});
}
};
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
<!--button id="drop" onclick="drop()">Drop Markers</button-->
</body>
</html>
Here is an example which I ported to the Google Maps API v3 from Mike Williams' Google Maps API (v2) tutorial that has multiple markers with unique infowindows, it uses function closure to associate the infowindow content with the marker.
The final version is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(53.014783, -95.097656);
var iterator = 0;
var neighborhoods = new Array(
new Array("test1","49.165206","-122.665443"),
new Array("test2","49.14476","-121.98544"),
new Array("test3","49.162063","-122.667675"),
new Array("test4","48.455005","-123.54155"),
new Array("test5","51.038156","-114.035339")
);
var markers = [];
function initialize()
{
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
infowindow = new google.maps.InfoWindow({
});
for(var i = 0; i < neighborhoods.length; i++)
{
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
map: map,
title: neighborhoods[i][0],
html: neighborhoods[i][0],
animation: google.maps.Animation.DROP
}
);
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
};
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
</body>
</html>