Don't miss out Virtual Happy Hour this Friday (April 26).
Try our conversational search powered by Generative AI!
AI OnAI Off
Google Map on Page with Multiple Pins, Description and Localization
Have a look at how to render map markers on google maps, maybe this post is useful ?
http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
Possible solution then would be to have your "MapBlock" render the markup for your map to fill. i.e.
<div id="map" style="width: 500px; height: 400px;"></div>
And also the javascript to bind the map to this div.
And if your MapBlock had a ContentArea property that accepted say "MapMarkerBlock" who's content would include the lat, long and description. You could create multiple items of this type and add them to your "MapBlock"
You could then simply render these values into the javascript in the view. i.e. the locations array in that example post.
regards,
Danny
Jan 19, 2016 16:30
Hey Sanket,
DannyMurphy is right about changing the style of the map div. You can also do it thanks to the styles in <head> section to make it easier to read and execute. I guess you know that you can refer by # to your div and then just change styles with CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</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: 1000px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
Look at the #map and the div container which is below. Hopefully, I helped you at least a little bit. If you would like to know about Google Maps and adding multiple markers I have found an interesting article about it.
Cheers,
Amy
Aug 14, 2018 15:54
Here's an example of a simple "one marker" google map block.
https://world.episerver.com/blogs/Son-Do/Dates/2016/5/simple-map-block---mvc/
The only change you will have to make is to change the properties on the map block to a PropertyList<T> which will allow the content authors to add multiple markers.
Hope that helps.
Aug 15, 2018 21:51
Hi,
I am using EPiServer 9 for developement. I want to develop block to show Google map on page. It will have option for showing multiple pins with their Lat/Log and their description on map.
Do episerver have add-on or nuget package already developed with such requirement.
If no, what can be my approach on this?
Regards.