Dynamic google map creation using same division and variable

Dynamic google map creation using same division and variable - javascript

I am trying to generate map onclick on same division and same variable "map" using following script, it's not functioning, I don't know how to destroy old map and recreate please someone help me.. this is what I have tried so far..
Here is link to fiddle
JS
function map(lat,lon){
jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
});
}
var lat =22, lon = 75;
map(lat,lon);
HTML
<div id="map"></div>
<button onclick="map(15,90)" >15 90</button>
<button onclick="map(22,80)" >22 80</button>
CSS
#map {
height: 300px;
width: 500px;
}
button{ width:70px;height:40px;}

function map(lat,lon){
// jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
//});
}
i didn't make test for it, just look through to check the syntax
i test it, your fiddle's issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<style type='text/css'>
#map { height: 300px; width: 500px; }
button { width: 70px; height: 40px;}
</style>
<script type='text/javascript'>
function map(lat, lon) {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
</script>
</head>
<body>
<div id="map"></div>
<button onclick="map(15,90)">15 90</button>
<button onclick="map(22,80)">22 80</button>
</body>
</html>

Related

Google Maps Marker doesn't show up in my website

Can someone help me please I don't understand javascript
<script type="text/javascript">
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(31.6321288,-8.0099319,787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLatLng = new google.maps.LatLng(31.6321288,-8.0099319,787);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "We Are Here"
});
</script>

According to the Google Documentation, it is as follows.
Make sure you include this line in your html tag and get your Google Map API Key to replace the YOUR_API_KEY
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
<!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 myLatLng = {lat: -25.363, lng: 131.044};
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=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

1 - You need to create a Google Maps project and generate an API KEY (https://console.developers.google.com). It's very simple and fast.
2 - So, you need to import GoogleMapsAPI, changing YOUR_API_KEY for your API KEY:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
The result is something like this:
<!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 myLatLng = {lat:31.6321288, lng:-8.0099319};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Google maps shows up Grey, but works when resizing the browser

Hej. Google maps turns up grey in the browser, but can see the markers and the google logo in the bottom right corner.
Have tried the resize function, but still won't work.I am using bootstraps col.
I can see it works here, but it doesn't.
Thanks for the help.
function initialize() {
var myOrigin = new google.maps.LatLng(56.63914, 9.79765);
var mapProp = {
center: myOrigin,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myCenter = new google.maps.LatLng(56.157165, 10.207644);
var marker = new google.maps.Marker({
position: myCenter,
title: 'Click to zoom'
});
marker.setMap(map);
var myCenter2 = new google.maps.LatLng(57.04661, 9.924479);
var marker2 = new google.maps.Marker({
position: myCenter2,
title: 'Click to zoom'
});
marker2.setMap(map);
/*On marker click, it zooms to 19*/
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(19);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker2, 'click', function () {
map.setZoom(19);
map.setCenter(marker2.getposition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#googleMap {
height:350px;
width:100%;
}
<body>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="googleMap"></div>
</div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</body>

If you check the Getting Started for JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
NOTE:
If you're using the API under the standard plan, you must use a browser key (a type of API key) set up in a project of your choice. See more about API keys for the standard API.

Why won't google maps show on my website, I have been using the developers website?

/* This is the javascript function that makes the map load */
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 8
});
}
/* This is the basic css */
#map {
width: 500px;
height: 400px;
}
<!-- Javascript called into the html page -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>
</html>

your function is not calling use $(document).ready(function()()) for call your function
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
$(document).ready(function() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
});
</script>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

you need to add a DOM listener that will execute the initMap() function on window load.
try this
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(44.540, -78.546),
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
#map {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div id="map"></div>

Load Google Maps in HTML page when button is clicked

I have an HTML page with a list of buttons representing locations. When any button is clicked, I want a Google Map to appear with that location. Should the map open on a new HTML page? (because the map should take up the full page), or is it possible to display the map on the same page?
EDIT - OK, I want to open it in another HTML file. I have an external JS file which has the following Map code:
function initialize(lat, lng) {
var mapOptions = {
center: {lat: parseFloat(lat), lng: parseFloat(lng)},
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
My external HTML file is given below:
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js" ></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But its not working. The external JS file cannot locate "map-canvas", it seems. Can anyone tell me how to fix this? (script.js is the external JS file)

I worked around your question try this :
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
</head>
<body>
<div>
Show Map1
</div>
<div>
Show Map2
</div>
<div>
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
</div>
<script>
var render_map = function( lat, lng, title ) {
var mapCanvas = document.getElementById('map-canvas');
// options
var args = {
zoom : 16,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( mapCanvas, args);
// create marker
var marker = new google.maps.Marker({
position: args.center,
map: map,
title: title
});
toggleMap();
}
var toggleMap = function(){
if ($('body').hasClass('-show-map')) {
mapHide();
} else {
mapShow();
};
}
$('.map-trigger').on('click', function(event) {
event.preventDefault();
var lat = $(this).data('lat');
var lng = $(this).data('lng');
render_map(lat, lng);
});
</script>
<div id="map-canvas"></div>
</body>
</html>

Google Map API v3 is not appearing [duplicate]

This question already has answers here:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
(8 answers)
Closed 9 years ago.
I can't get my Google map to appear in any browser. I even tried copying mostly the sample code below from Google's example and build off of that, but I can't even get that to appear. Any ideas what could be wrong below? NOTE: I actually DO put my API key where I have "I PUT MY KEY IN HERE". :)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=I PUT MY KEY IN HERE&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { height: 100%}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { width : 100%;
height : 300px;
border: solid thin #333;
margin-top: 20px;}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>

You dont need a key in V3 of this API :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 500px;
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
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,
map: map,
title: 'My Place!'
});
}
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>

Your map doesn't have a size so you can't see it
<div id="map-canvas" style="height:500px; width:600px"></div>
You also are not including the API script (I get an error "google is not defined" in the javascript console), this works for me locally:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html,body,#bb_map { height: 100%; width:100%;}
#map-canvas { height: 100%; width:100%;}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
working example

Develop Reference

JavaScript is the programming language of the Web.

Dynamic google map creation using same division and variable - javascript

Related

Google Maps Marker doesn't show up in my website

Google maps shows up Grey, but works when resizing the browser

Why won't google maps show on my website, I have been using the developers website?

Load Google Maps in HTML page when button is clicked

Google Map API v3 is not appearing [duplicate]

Categories

Resources