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.
Related
I'm using Mapbox to integrate in a javascript/php project. So far so good. Works great. Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and mapbox-directions api. They don't seem to be the same thing.I really like the example from mapbox-gl-directions which gives the user options to select between driving, cycling and walking. But I already have coordinates for the origin point and coordinates for the destination point. I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to. How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api? I've looked everywhere in their docs.
mapbox-gl-directions :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
type="text/css"
/>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
</script>
</body>
</html>
Turn
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
into
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions,'top-left');
map.on('load', function() {
directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
directions.setDestinaion([11, 22]); // can be address
})
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<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 {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
HTML with JS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-ksdsad&callback=initMap"></script>
<script>
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
</div>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
The specific problem is that when I put CSS in the HTML with #map the map shows and works but from the separate file it just doesn't show. Why?
EDIT: Making a MVC application via Visual Studio
EDIT 2: Something with the file location was wrong. I created a new project and put the CSS in a file that was already made. Now it's working.
First things first - put your script tags into head and try again. I suspect that there's some funky stuff with google maps replacing contents of #map and removing scripts in the process.
It should be <link rel="stylesheet" type="text/css" href="./css/custom.css" /> Use . insteads of ~
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.
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>