I would like to show a filled point (red colour) in a OSM from PHP. I have tried numerous changes unsuccessfully. With my code, I have only got a transparent point in an specific location.
<?php
echo '
<html>
<head>
</head>
<body>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<script>
var attribution = new ol.control.Attribution({
collapsible: true
});
var map = new ol.Map({
controls: ol.control.defaults({attribution: false}).extend([attribution]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
maxZoom: 18
})
})
],
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([-4.561,37.019]),
maxZoom: 18,
zoom: 10
})
});
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
';
echo "
geometry: new ol.geom.Circle(ol.proj.fromLonLat([-4.561,37.019]),9000,'XY')})
]
})
});
map.addLayer(layer);
</script>
</body>
</html>";
?>
I expect to show a filled point in a specific location on a OS Map
You will need a Point geometry and a style with a red fill
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-4.561,37.019]))})
]
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: "red"
})
})
})
});
radius is in pixels and can be changed to suit your requirements
Related
I'm working on an app with few points of coordinates but I can't get the center points. Can anyone help? this is my code:
<div id="mymap"></div>
<script type="text/javascript">
function initMap() {
var locations = <?php print_r(json_encode($hospitalmap)) ?>;
var mymap = new GMaps({
el: '#mymap',
lat: mymap.getCenter().lat(),
lng: mymap.getCenter().lng(),
zoom:13
});
//gMap.setCenter(new google.maps.LatLng(-6.2598513, 106.6160752));
$.each( locations, function( index, value ){
mymap.addMarker({
lat: value.HospitalLatitude,
lng: value.HospitalLongitude,
title: value.HospitalName,
click: function(e) {
alert('This is '+value.HospitalName+'.');
}
});
});
}
</script>
PS it works if i sent the center manually
EDIT: I tried to change it with rohit's guide to this
var bounds = new google.maps.LatLngBounds();
var mymap = new GMaps({
el: '#mymap',
zoom:13
});
$.each( locations, function( index, value ){
mymap.addMarker({
lat: value.HospitalLatitude,
lng: value.HospitalLongitude,
title: value.HospitalName,
click: function(e) {
alert('This is '+value.HospitalName+'.');
}
});
bounds.extend(marker.position);
}
);map.fitBounds(bounds);
}
</script>
still not working at the moment. Please help!
Heres the data sample:
var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida#gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs#mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];
Now the below is a working sample, you can replace the locations by your PHP code, and hope this works well.
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="https://maps.google.com/maps/api/js?key=AIzaSyD95RyzZ5IEngrkYckzqRMAwyCZ7-eezMw"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<div id="map">dfas</div>
<style>
#map {
width: 98%;
height: 600px;
margin-bottom:50px;
margin-left:15px;
}
</style>
<script type='text/javascript'>
function initMap() {
var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida#gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs#mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];
var map;
var bounds = new google.maps.LatLngBounds();
map = new GMaps({
el: '#map',
lat: -6.254463,
lng: 106.622776
});
$.each( locations, function( index, value ){
map.addMarker({
lat: parseFloat(value.HospitalLatitude),
lng: parseFloat(value.HospitalLongitude),
title: value.HospitalName,
click: function(e) {
alert('This is '+value.HospitalName+'.');
}
});
bounds.extend({lat: parseFloat(value.HospitalLatitude), lng: parseFloat(value.HospitalLongitude)});
});
map.fitBounds(bounds);
}
initMap();
</script>
Thanks
i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database. also it display a infowindow on click Listener.
the problem is that the infow window doesn't shows any data inside of it.
can anyone one tel me where is the error?
code:
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: feature,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
If I'm reading your code right, you've got an array of features that looks like:
features = [
{position: new google.maps.LatLng(1, 2)},
{position: new google.maps.LatLng(3, 4)},
// etc...
];
i.e. the array contains objects with just a position property. So you correctly refer to that when you do:
position: feature.position,
However when you try and set your infowindow content using:
new google.maps.InfoWindow({
content: feature,
maxWidth: 300
})
That won't work, because the content property is meant to be a string, not a JS object. You need to specify some text there. If you're just wanting to display the coordinates, you could do:
new google.maps.InfoWindow({
content: feature.position.toString(),
maxWidth: 300
})
I have this code below which draws a line on a google maps from co-ordinates from an XML file.
However I want it to show the first co-ordinate and the last coordinate with a place marker as well. I managed to do this without drawing the line by following the steps here:
https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1
but can't seem to be able to integrate the 2. i.e Draw the line and have place markers at the start and finish.
I'm sure its just a tiny bit of code I have to add too the code I already have below but I'm wrecking my train trying to work it out. Any help would be greatly appreciated.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var point;
var flightPlanCoordinates=new Array();
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(50.431, -3.202),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
flightPlanCoordinates[i]=point;
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
In the code that you posted above, you are never adding your markers to the map, which is done with the following code:
var marker = new google.maps.Marker({
map: map, //The Map Object
position: point //The location of the Marker
});
You would want to put this statement into your for loop as you iterate through the GPS points, and if it is the first iteration or the last iteration through the loop, than add your marker. You can than draw your polyline after the loop like you are doing in your posted example.
Hi i have an web app where i integrate gmap on it which will look similar to Yelp gmap services. The issues is that when i mouseover the marker the infobox stuck within the box as follow:
the infobox suppose to look like this
Below are my current code for integrate gmap
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
<script type="text/javascript">
var gmap, gpoints = [];
$(document).ready(function() {
initialize();
});
function initialize() {
gmap = new google.maps.Map(document.getElementById('themap'), {
zoom: 8,
streetViewControl: false,
scaleControl: false,
center: new google.maps.LatLng(3.3000000,101.9629796),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php
$content = '<p>Test</p>';
?>
gpoints.push( new point(gmap, '<?php echo $lat; ?>', '<?php echo $long; ?>', '<?php echo $content; ?>') );
}
function point(_map, lat, lng, content) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: _map,
zIndex: 11
});
this.content = content;
var gpoint = this;
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
google.maps.event.addListener(_map, 'zoom_changed', function() {
center=gpoint.marker.getPosition();
lat=center.lat();
lng=center.lng();
// alert(lat+"===="+lng);
});
}
function popup(_point) {
_point.popup = new InfoBox({
content: _point.content,
position: _point.marker.getPosition(),
// shadowStyle: 1,
padding: 20,
//backgroundColor: '#ddd',
borderRadius: 10,
arrowSize: 10,
borderWidth: 1,
// borderColor: '#dddddd',
disableAutoPan: true,
arrowPosition: 30,
// backgroundClassName: 'phoney',
arrowStyle: 2
});
_point.popup.open(_point.marker.map, _point.marker);
google.maps.event.addListener(_point.popup, 'domready', function() {
google.maps.event.addDomListener(_point.marker, 'mouseout', function() {
_point.popup.close();
});
});
}
</script>
You may use the option pixelOffset of the infoBox to control the position related to the marker.
The default is 0,0 , which means that the top left corner of the infoBox sticks on the position(of the marker).
To place it top+center, you must explicitly assign to the content of the infobox, and apply a pixelOffset as follows:
pixelOffset:new google.maps.Size(-halfOfWidthOfTheBox,0)
When you don't know the size of the infoBox you may calculate it.
Add this to the domready-callback of _point.popup:
this.setOptions({pixelOffset:new google.maps
.Size(-parseInt(this.div_.offsetWidth/2,10),0)});
I have implemented a styled google map into my website, when I view the page on an iphone it locks the zoom level of the web page. The "map" is still "pinchable" to zoom but the webpage is not.. I can't work out how to turn on the pinch zoom for the webpage and the map?
Thanks in advance any helpers! Here's a link to the page - http://esdaledesigns.com/contact.php
<script type="text/javascript">
function initialize() {
// Create an array of styles.
var styles = [
{
"stylers": [
{ "hue": "#ff6e00" },
{ "saturation": -67 }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "The Stockwell"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(51.890488, 0.899154),
mapTypeControlOptions: {
mapTypeIds: ['map_style'],
},
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var myLatlng = new google.maps.LatLng(51.890488, 0.899154);
var marker = new google.maps.Marker({
position: myLatlng,
animation: google.maps.Animation.DROP,
map: map,
title:"The Stockwell"
});
//information
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">The Stockwell Colchester</h2>'+
'<div id="bodyContent">'+
'<p>THE STOCKWELL<br />18 WEST STOCKWELL STREET<br />COLCHESTER<br />ESSEX<br />CO1 1HN<br /></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
</script>
ok, worked it out....
It was this bit of code a few lines above the script I posted, just above the google api key. <meta name="viewport" content="initial-scale=2.0, user-scalable=no" /> I changed user-scalable to "yes" and initial-scale to "0.5" and everything is working correctly.
Hope this helps someone else.