var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="container-fluid">
<div class="row">
<div id="map" style="width: 100%; height:100%"></div>
</div>
</div>
Google map with custom marker
hello i am using Google map inside my website.i want to add my logo.png instead of Google marker.i have generated key from Google page & added it inside the script tag. i have followed all the steps given on the Google page i have written the following code for it.but when i use the following code it shows nothing.i want to design same layout as shown in image.
Remove all the outer divs. just remove and try your code works.
refer this question : Google Maps doesn't work when inside a div
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="row" style="width: 100%; height:100%">
<div id="map"></div>
</div>
you should set a size to your div#map like so:
#map1 {
height: 100%;
width: 100%;
}
Adjust according your needs of course.
The crux of your problem goes to integrating google map with bootstrap.In details, you should set the css height style of map tag's parent div(.container-fluid) to 100%;
In order to make the following demo run normally,you should provide your google map api key and your picture file for the marker.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body,
.container-fluid {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 26.880,
lng: 112.644
},
zoom: 8
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(26.880, 112.644),
map: map,
draggable: true,
icon: '/images/github-youtube.jpg'// your image file path
});
marker.setMap(map);
}
</script>
<!-- your google map api key : xxxx-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
PS: this is the first time I used google maps,so maybe some code is weird.I have tried as the following procedure.
1.see google maps getting started page.
2.add customized marker.
3.integrate with bootstrap.
Hope it can help you.
Related
I have a google map location picker that works fine and returns LAT and LNG but I will like to add the LAT and LNG into the HTML input field when the location is picked. Below is what my code looks like:
<!DOCTYPE html>
<html>
<head>
<title>Event Click LatLng</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
<script type="text/javascript">
function initMap() {
const myLatlng = { lat: 24.466667, lng: 54.366669 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: myLatlng,
});
// Create the initial InfoWindow.
let infoWindow = new google.maps.InfoWindow({
content: "Click the map to get Lat/Lng!",
position: myLatlng,
});
infoWindow.open(map);
// Configure the click listener.
map.addListener("click", (mapsMouseEvent) => {
// Close the current InfoWindow.
infoWindow.close();
// Create a new InfoWindow.
infoWindow = new google.maps.InfoWindow({
position: mapsMouseEvent.latLng,
});
infoWindow.setContent(
JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
);
infoWindow.open(map);
});
}
</script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2"
async
></script>
<input type="text" name="lat" id="lat">
<input type="text" name="lng" id="lng">
</body>
</html>
As you can see from above, there is an infoWindow that gets the LNG and LAT when a location is clicked on the map but now I want where a location is click it get the LNG to the input field<input type="text" name="lng" id="lng"> and LAT to <input type="text" name="lat" id="lat">
Add the following to your click listener:
document.getElementById('lat').value = mapsMouseEvent.latLng.lat();
document.getElementById('lng').value = mapsMouseEvent.latLng.lng();
code snippet:
function initMap() {
const myLatlng = {
lat: 24.466667,
lng: 54.366669
};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: myLatlng,
});
// Create the initial InfoWindow.
let infoWindow = new google.maps.InfoWindow({
content: "Click the map to get Lat/Lng!",
position: myLatlng,
});
infoWindow.open(map);
// Configure the click listener.
map.addListener("click", (mapsMouseEvent) => {
// Close the current InfoWindow.
infoWindow.close();
// Create a new InfoWindow.
infoWindow = new google.maps.InfoWindow({
position: mapsMouseEvent.latLng,
});
document.getElementById('lat').value = mapsMouseEvent.latLng.lat();
document.getElementById('lng').value = mapsMouseEvent.latLng.lng();
infoWindow.setContent(
JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
);
infoWindow.open(map);
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Event Click LatLng</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
<input type="text" name="lat" id="lat">
<input type="text" name="lng" id="lng">
</body>
</html>
Right now you have
infoWindow.setContent(
JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
);
Which as you said puts the latlng info into the infoWindow. It sounds like that works correctly. So it should just be a matter of adding
document.querySelector("#lat").value = mapsMouseEvent.latLng.lat;
document.querySelector("#lng").value = mapsMouseEvent.latLng.lng;
You can put that within the map.click handler, right after infoWindow.setContent, or in place of it.
I want to Geocoding using OSM map, javascript code and OpenLayers library. .But I do not know what library I should use or what code to write.please guide me.
Thanks
I want to make changes to the code below to add Geocoding.
<!DOCTYPE html>
<html>
<head>
<title>Show OSM map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 90%;
width: 100%;
}
</style>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map" "></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([51.39, 35.70]),
zoom: 13
})
});
</script>
</script>
</body>
</html>
If you're looking for controls to let the user search places on your map, have a look at this example with Nominatim or this with Photon API.
Just create a control and add it to the map. Then do something when a place is selected (center the map):
// Set the search control
var search = new ol.control.SearchNominatim ({
// or: = new ol.control.SearchPhoton({
lan: 'en',
position: true // Search, with priority to geo position
});
map.addControl (search);
// Center map when destination is selected
search.on('select', function(e) {
map.getView().animate({
center: e.coordinate,
zoom: Math.max (map.getView().getZoom(),16)
});
If you want to geocode a bulk of addresses, look at API used by the example and their implementation in the lib.
i need to show dynamic longitude and latitude in a google map . im able to show map markers in the html page , but im unable to show in .cshtml page. in console window also there is no error showing.
view page code
#model List<smartpond.Models.AssetTrackerViewModel>
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div class="container">
<div id="map"></div>
</div>
#section scripts{
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ&callback=initMap">
</script>
#section scripts{
<script>
function initMap() {
var myLatLng = { lat: 22.825261, lng: 86.163366 };//Bharat Seva Ashram
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
}
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)
Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>